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Applications Internet riches CRIAI 



Framework de reference pour le developpement web riche en Flash, Adobe Flex 3 
permet, grace a ses bibliotheques de composants graphiques et d'acces a des don- 
nees distantes via des sen/eurs PHP/Java, de creer des applications RIA ergono- 
miques et complexes en respectant les bonnes pratiques de genie logiciel [MVC]. 

Get ouvrage decrit pas a pas la creation d'une application web riche grace a Flex 3. 
Non sans quelques rappels sur ActionScript et MXML, il propose une demarche 
methodique pour developper en Flex : creation d'interfaces interactives et evo- 
luees avec les etats d'affichages, effets et transitions, gestion des donnees et 
communication serveur via AMFPHP ou BlazeDS, donnees diffusees en temps 
reel, gestion des composants... mais aussi developpement d'un widget RDA avec 
le moteur d'execution AIR. 
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Avant propos 



Flex est un framework Open Source qui permet de creer des applications 
Internet riches, hautement interactives et ergonomiques. Flex est base 
sur la machine virtuelle Flash, qu'il utilise pleinement tout en proposant 
d'autres fonctionnalites complementaires dediees a la creation d'applica- 
tions en ligne tres evoluees. 

S'appuyant sur une etude de cas concrete, le developpement de I'applica- 
tion exemple MediaFoot, ce livre presente les caracteristiques principales 
du developpement d'applications riches avec Flex 3 et son outil Flex 
Builder 3. II demontre que le developpement d'un site en Flex est a la 
fois rapide, performant et economique. II expose les principes de base de 
programmation d'une application Flex, de la description d'une interface 
utilisateur et des methodes de communication distantes. En resume, ce 
livre montre comment utiliser les principaux logiciels dedies au develop- 
pement d'applications riches avec Flex. 



A qui s'adresse cet ouvrage ? 

Tous les developpeurs, chefs de projet ou consultants interesses de pres 
ou de loin par le developpement d'un site Internet ou d'une application 
web se poseront tot ou tard la question de I'utilisation de Flex et du lec- 
teur Flash. Les designers Flash seront egalement interesses par la pers- 
pective de creation d'interfaces utilisateur avec Flex. Les infographistes 
apprecieront aussi la possibilite de creer des applications ergonomiques 
en mode Design sans ecrire une ligne de code. 



Pour assimiler les exemples de ce livre, des bases en programmation, 
orientee objet si possible, sont souhaitables mais pas indispensables. 
Quelques fondamentaux seront rappeles tout au long du developpement 
de notre application. 



Structure de Touvrage 



Dans le chapitre 1, nous presentons I'interet des applications riches dans 
I'univers d'Internet. Quelques alternatives objectives a Flex sont egale- 
ment evoquees. 

Dans le chapitre 2, nous decrivons rapidement les differents modules de 
I'etude de cas. 

Le chapitre 3 servira d'introduction au principal outil de developpement 
Flex, I'environnement de developpement integre Flex Builder 3. 

Le chapitre 4 abordera MXML, le langage de description d'interface 
utilisateur de Flex, base sur XML. Nous commencerons alors a conce- 
voir I'interface de notre etude de cas. 

Avec le chapitre 5, nous progresserons dans la conception de I'interface 
utilisateur avec le langage MXML et en utilisant les CSS pour lui 
ajouter des styles et la personnaliser. 

Dans le chapitre 6, nous aborderons et appliquerons les etats d'affichage 
(view states), effets et transitions proposes par le framework Flex. 

Pour le chapitre 7, nous nous concentrerons sur la gestion des donnees 
avec une interface utilisateur decrite en MXML, en introduisant notam- 
ment le concept de liaison de donnees {^data binding). Nous introduirons 
par la meme occasion le langage de programmation objet 
ActionScript 3.0, veritable moteur de toute application riche developpee 
avec Flex. 

Au cours du chapitre 8, nous presenterons la notion de propagation eve- 
nementielle avec les langages MXML et surtout ActionScript 3.0, prin- 
cipe incontournable pour la gestion des evenements d'une application 
Internet riche. 



Le chapitre 9 nous permettra de presenter le concept ^item renderer avec 
Flex, sous la forme d'une petite galerie d'image. Ces outils de rendu 
d'elements permettent en effet de personnaliser certains composants de 
type affichage par liste. 

Dans le chapitre 10, nous aborderons le principe de communication 
entre une application Flex, une passerelle AMFPHP (langage PHP) et 



VI 



une base de donnees distante MySQL, en utilisant le format AMF et en 
introduisant I'incontournable technique du Flash Remoting. 

BlazeDS est une solution serveur Open Source tres interessante pour la 
connexion a des donnees distantes {remoting) ou la communication en 
temps reel. Dans le chapitre 11, nous montrerons comment la mettre en 
oeuvre pour realiser une application de communication en temps reel. 

Enfin, le chapitre 12 nous permettra d'introduire le developpement 
d'applications de bureau riches avec Flex, en utilisant le nouveau moteur 
d'execution AIR. 

Vous trouverez egalement, en annexe de cet ouvrage, quelques informa- 
tions sur le referencement des applications Internet riches realisees avec 
Flex, sur le developpement avec le framework Cairngorm, base sur un 
motif de conception (design pattern) M VC et les dernieres perspectives 
concernant le flitur SDK Flex 4, nom de code « Gumbo ». 

Les codes sources de I'etude de cas sont disponibles en telechargement a 
I'adresse suivante : http://media.foot.free.fr/sources/. 
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Le Web 2.0 avec Flex 



Avec I'avenement discret mais ineluctable des « RIA », 
applications Internet riches, le Web est en pleine transition. 
Regardons de plus pres les raisons de cette evolution et voyons 
pourquoi, parmi toutes les technologies disponibles, Flex 
est devenu I'une des references de premier choix. 
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B.A.BA RIA 



RIA est I'abreviation de Rich Internet Applica- 
tion mais aussi de fi/c/i Interactive Applica- 
tion, comme on peut encore le lire parfois. Le sigle 
RIA est apparu pour la premiere fois en mars 2002, 
sous la forme d'un memo redige par Jeremy Allaire, 
qui etait a cette epoque directeur technique de la 
societe Macromedia (rachetee par Adobe fin 2005). 
Dans ce livre blanc, Jeremy Allaire decrivait revolu- 
tion vers un « Internet riche ». 



B.A.BA Flash 



Beaucoup de developpeurs estiment que la tech- 
nologie Flash est exclusivement destinee aux desi- 
gners. Mais au cours des annees, de nombreux 
professionnels du Web ont commence a utiliser 
Flash pour concevoir des applications integrant du 
contenu interactif et des medias riches. 
Aujourd'hui, le developpement d'applications web 
utilisant la machine virtuelle Flash necessite de 
plus en plus les competences d'un developpeur 
logiciel. La nouvelle machine virtuelle AVM2 du 
dernier Flash Player a ete congue pour supporter 
de grandes charges de calculs cote client. Flash 
salt desormais parfaitement faire interagir des ani- 
mations vectorielles, de la video et du son. 



RIA et RDA, pourquoi sont-ils Tavenir 
du Web 2.0 ? 

II parait qu'une revolution pleinement reussie est une revolution discrete. 
Ne parlons pas de revolution ici, mais plutot d'evolution : aujourd'hui, le 
Web se metamorphose petit a petit, meme si les detracteurs du Web 2.0 
contesteront cette evolution, la presentant plutot comme une doi release 
mineure, une semi-evolution qu'ils nommeront 1.5 par derision... Le 
debat reste ouvert, mais une chose est tenue pour acquise et le consensus 
sur ce point est total : I'avenir du Web passera par une nouvelle forme 
d'experience utilisateur. 

Le mot est lache : experience. La semantique s'articulant autour du Web 
evolue. Nous ne parlerons plus d'interface utilisateur, mais d'experience 
utilisateur. Nous ne parlerons plus d'application en ligne, mais d'expe- 
rience interactive ergonomique. Nous ne parlerons plus de sites dynami- 
ques, mais d'applications riches. 

Internet a deplace certaines barrieres intergenerationnelles, sociocultu- 
relles et meme parfois economiques, et s'impose desormais comme un 
outil incontournable. Cependant, nos applications doivent encore et tou- 
jours evoluer. Le challenge est passionnant et, vous-meme qui lisez cette 
introduction, le pressentez. C'est ainsi que le developpement des RIA est 
apparu. Une RIA est une nouvelle possibilite offerte aux developpeurs 
pour ameliorer I'ergonomie applicative, la productivity, la maintenance et, 
surtout, I'adhesion a une nouvelle experience utilisateur « riche ». 

Bien evidemment, I'utilisation du terme « riche » associe a Internet ne 
peut pas etre datee precisement, car ce concept s'est installe progressive- 
ment depuis quelques annees. En effet, les developpeurs ont toujours 
cherche a ameliorer la navigation et I'interactivite de leurs sites pour les 
rendre aussi intuitifs que possible. Cependant, il est remarquable que 
Macromedia ait ete la premiere entreprise a integrer, avec Google, ce 
« nouveau » concept dans la logique d'une solution technologique exis- 
tante, basee en I'occurrence sur le lecteur Flash. 

Ainsi naquit Flex, une technologie de developpement et de deploiement 
RIA utilisant le capital sympathie (non dementi aupres des internautes) 
du lecteur Flash. 



Les bienfaits du concept RIA pour Teconomie du Net 

Pour bien comprendre tout I'interet d'une RIA dans le Web 
d'aujourd'hui, il faut repenser et concevoir a nouveau les attentes des uti- 
lisateurs (les internautes) et les besoins des developpeurs (les votres). A 



ce duo, nous pouvons ajouter une troisieme composante : les exigences 
d'une entreprise. En effet, le but principal de toute entreprise (dans sa 
definition la plus large) est de transformer un taux de visites virtuel sur 
son site marchand en realite economique. Et c'est I'argument le plus per- 
cutant en faveur du developpement des RIA : optimiser la rentabilite. 
Quelle entreprise peut encore aujourd'hui accepter de perdre des clients 
sous pretexte de ne pas disposer d'un outil communiquant plus ergono- 
mique, plus rapide, plus fiable et par consequent plus securisant ? Com- 
ment eviter qu'un client potentiel finisse par abandonner un site 
marchand, depite et contrarie, sans avoir realise I'achat escompte ? En 
bref, comment optimiser I'interactivite, I'ergonomie et le cote intuitif 
d'un ensemble de processus complexes, pour le plus grand nombre 
d'internautes possible ? L'avenement des RIA se justifie done aussi selon 
une logique economique. 

Dans le cadre de la viabilite de certains projets, le concept de RIA peut 
s'averer determinant. Voici un autre argument en faveur de la democrati- 
sation des RIA. En effet, selon une etude etonnante de Forrester Search, 
entre 70 et 80 % des projets IT sont abandonnes, non pas pour des rai- 
sons economiques ou de difficultes de realisation technique, mais par 
crainte d'un potentiel rejet de la part des utilisateurs. En effet, nombre 
de projets ne verront jamais le jour, car ils s'averent bien trop peu intui- 
tifs a I'utilisation. 

Combien de projets mis en production ne sont jamais utilises ? En effet, 
les internautes preferent de loin une application integrant une interface 
utilisateur facile et rapide a apprehender a une application sinueuse, pour 
ne pas dire opaque, avec un apprentissage prealable parfois long et penible. 
Voici un argument supplementaire en faveur du deploiement des RIA. 



Ensavoirpius Forrester Search 

Le bureau d'etudes Forrester Search demontre 
notamment que le parametre le plus important 
pour un internaute concerne la facilite d'utilisation 
ou le caractere intuitif d'une application, bien 
avant son contenu. 



Ensavoirplus Referencement des RIA 

L'un des principaux freins, dans le developpement 
des RIA, a longtemps ete lie a la problematique du 
referencement par les moteurs de recherche. En 
effet, jusqu'a il y a peu de temps, les moteurs 
comme Google ne referengaient pas ou peu les 
pages dynamiques des applications RIA, et done 
pas non plus les sites en Flex, par exemple. Cette 
question n'est plus d'actualite aujourd'hui, et le 
referencement des pages generees au format Flash 
est desormais possible, notamment grace a une 
collaboration etroite entre Google et Adobe afin 
d'oeuvrer dans le bon sens. II existe par ailleurs des 
techniques pour permettre le referencement des 
applications Flex (voir I'annexe B, dediee au refe- 
rencement). 



Les RIA dans le detail 

Mais, concretement, que nous propose aujourd'hui une application dite 
« riche » ? Pour faire simple, les RIA sont assimilables a des applications 
web qui s'inspirent des fonctionnalites des applications de bureau (logi- 
ciels, programmes autonomes, etc.). Ainsi, ce sont des applications qui 
utilisent les processus ergonomiques d'lHM (interface homme- 
machine) reserves autrefois aux applications de bureau. Les RIA trans- 
posent done sur des sites Internet la plupart des fonctionnalites utilisees 
par les applications de bureau. L'objectif des RIA est ainsi de Risionner 
les programmes autonomes classiques avec les applications client-serveur 
fonctionnelles sur Internet. 

L'exemple le plus parlant est celui de la fonction « glisser-deposer ». 
Depuis plus de deux decennies, cette fonction est disponible avec la plu- 



part des systemes d'exploitation et sur certains logiciels. Mais son utilisa- 
tion generalisee n'a commence a apparaitre que depuis une poignee 
d'annees sur Internet. Le processus du glisser-deposer est I'un des con- 
cepts d'interface homme-machine les plus intuitifs. Un enfant de trois 
ans peut facilement I'apprehender. II est done logique de I'integrer dans 
une application Internet. Pour illustrer encore plus precisement notre 
propos, reprenons I'exemple du site marchand et de son fameux panier 
d'achats. Sur les sites d'anciennes generations, pour remplir ce panier, le 
processus d'achat impliquait un certain nombre de dies sur des hyper- 
liens, methode peu intuitive, bien que parfaitement fonctionnelle. 
Aujourd'hui, ce processus peut se realiser par un glisser-deposer d'un 
produit vers le panier virtuel (figure 1-1). 



Figure 1-1 

La fonction « glisser-deposer » 
sur un site marchand 
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Alternative Ajax 



L'apparition d'Ajax dans I'univers Web 2.0 a toute- 
fois modifie la donne. Coupler le XHTML, CSS et 
JavaScript avec un respect scrupuleux des stan- 
dards du W3C qui a en charge le DOM, par 
exemple, permet de developper des applications 
Web 2.0 tres innovantes et particulierement ergo- 
nomiques. 



II est communement admis que de nombreuses applications web con9ues 
en HTML, JavaScript et CSS sont difficiles a utUiser. Les causes des 
lacunes de ce type d'applications sont multiples, et ne sont pas exclusive- 
ment liees a la pauvrete du design. Cela tient principalement aux limita- 
tions inherentes aux sous-couches technologiques. En effet, les 
applications HTML sont habituellement con9ues sur le modele de la page 
web classique dediee a la presentation de contenu simple, reliee a d'autres 
pages web du meme modele via des hyperliens, parfois agrementee de 
code JavaScript pour prendre en charge un minimum d'interactivite. Ce 
modele a fait ses preuves dans une perspective Web 1.0, et convient parfai- 
tement a des applications dediees a la presentation simple de donnees ainsi 
qu'a la collecte de donnees simples, mais il s'avere peu a propos dans une 
perspective d'applications evoluees, hautement interactives. Le rafraichis- 



sement systematique de la page complete est assez problematique pour 
I'internaute qui peut ainsi facilement perdre sa concentration. 

C'est pourquoi I'interet des RIA ne se limite pas seulement a I'optimisa- 
tion de I'ergonomie. Elles presentent d'autres benefices pour I'internaute 
comme I'amelioration de I'experience utilisateur, a savoir une meilleure 
fluidite globale de la navigation. En effet, les delais de rafraichissement 
des pages sont fortement reduits dans une application riche. La vitesse 
d'execution d'une application RIA est generalement plus elevee compa- 
rativement a une application web dynamique standard, qui est principa- 
lement structuree suivant le modele « client-serveur », constitue d'un 
client leger qui ne gere essentiellement que les fonctionnalites d'affi- 
chage et de transfert d'informations vers le serveur. Selon ce modele, le 
serveur est en charge des processus les plus complexes et les plus nom- 
breux. II est done sollicite frequemment pour la plupart des interactions 
client- internaute. Ce non-sens, pour ne pas dire dysfonctionnement 
structurel, est partiellement resolu avec les RIA qui transferent un 
maximum de processus du serveur vers le client. Ainsi, les delais lies au 
temps de rafraichissement des pages sont reduits. Les allers-retours 
client-serveur sont reduits a leur strict minimum, et ce pour le plus 
grand bien de la sante mentale de I'internaute. Le concept de navigation 
est ainsi renouvele. Par exemple, le modele de navigation de page en 
page utilise par un formulaire n'est plus d'actualite avec les RIA. II n'est 
en effet plus utile de recharger I'integralite de la page pour passer a 
I'etape suivante, le rechargement de I'affichage peut plus facilement se 
positionner sur une zone ciblee de I'interface. Les RIA presentent done 
un environnement de navigation plus fluide, en apparence plus securise, 
plus fiable et par consequent plus agreable pour I'internaute. 



Les RDA, complements indispensables 
des RIA 

Ce premier tour d'horizon ne saurait etre complet sans I'introduction du 
concept des RDA. Pour les francophones, ce sigle rappellerait plutot 
celui de I'ancienne AUemagne de I'Est, mais pour le developpeur web, 
nul doute que rapidement aucun lapsus ne sera possible : RDA est bien 
I'abreviation de Rich Desktop Application. 

Les RDA sont des RIA transposees sur le bureau (d'ou le mot Desktop). 
Elles se rapprochent done des applications de bureau conventionnelles, 
car elles ne s'executent pas a I'interieur d'un navigateur web. 



Les frameworks 



Framework est le terme anglais pour definir, en 
informatique, un espace de travail modulaire. 
Generalement, un framework est un ensemble de 
bibliotheques, d'outils et de conventions permet- 
tant le developpement d'applications. 



Mais pour le developpeur, I'interet de proposer une RDA a la place 
d'une application de bureau classique est multiple. En premier lieu, une 
RDA permet une plus grande facilite de deploiement et de maintenance 
de I'application car, en s'affranchissant du navigateur, les RDA sont 
capables de mieux s'interfacer avec le systeme d'exploitation (et done de 
travailler en local directement, comme pour I'acces en ecriture de 
fichiers). Elles beneficient aussi pleinement des performances d'execu- 
tion d'un ordinateur, car elles s'affranchissent du navigateur. De plus, 
pour toutes ces raisons, I'ergonomie d'une application RDA sera implici- 
tement meilleure que celle d'une RIA. 

En contrepartie, un framework (environnement d'execution de plusieurs 
megaoctets) sera obligatoirement installe avant I'installation d'une RDA. 
Comme un plug-in, ce runtime ne s'installera qu'une seule fois, lors de la 
premiere utilisation, mais cet inconvenient (mineur a I'heure du haut 
debit) peut neanmoins freiner la democratisation de certaines technolo- 
gies de RDA. Cependant, ce petit « defaut » peut se reveler tres interes- 
sant, car I'utilisation d'un framework unique permet de disposer d'un 
socle technologique stable et facilement evolutif, de maniere quasi trans- 
parente pour I'internaute. Ainsi, la maintenance et le deploiement d'une 
application RDA sur un vaste pare heterogene d'ordinateurs deviennent 
grandement facilites. 

Pour resumer, le concept de RDA represente done une alternative plus 
que convaincante au concept des RIA, car ce type d'applications con- 
serve toutes les qualites de ces dernieres, tout en optimisant certaines 
fonctionnalites et en en proposant de nouvelles. De plus, les RDA peu- 
vent fonctionner egalement en mode deconnecte, contrairement aux 
RIA qui ont besoin d'une connexion permanente. Par rapport a une 
application de bureau classique, une RDA permettra de disposer de la 
meme puissance de calcul, tout en beneficiant d'un deploiement et d'une 
maintenance plus aises. En outre, le fait de rester connecte, meme par 
intermittence, permettra de garder certaines informations de fa9on 
decentralisee sur Internet. 



En matiere de choix technologique... 

Le choix d'une technologie de developpement n'est pas une mince 
affaire. Dans cette etape preliminaire, le principal piege serait d'evaluer 
une technologie en partant d'a priori obsoletes ou infondes, d'etre mal 
informe ou mal conseille et de manquer d'ouverture d'esprit envers une 
approche nouvelle ou differente. Parfois, ce choix peut s'expliquer par 
des contraintes professionnelles (budget limite, delais serres, formation 



inexistante...), mais attention aux prejuges definitifs. Open source n'est 
pas systematiquement synonyme ^ open mind et, dans ce domaine, la 
subjectivite est parfois trop presente. 

Choisir un environnement de developpement RIA ou RDA n'est done 
pas chose aisee. II existe aujourd'hui plusieurs alternatives credibles et 
nous allons, dans les lignes qui suivent, essayer de les decrire le plus 
objectivement possible afin de tenter de relever les defauts et les qualites 
des principales solutions. Nous ne passerons pas en revue, dans le detail, 
toutes les technologies existantes de maniere exhaustive, mais nous 
essayerons d'argumenter, avec le recul necessaire, les caracteristiques de 
celles qui sont le plus utilise aujourd'hui. 

A I'heure ou nous ecrivons ces lignes, les technologies RIA les plus 
employees (pour ne pas dire les plus renommees) sont Ajax, JavaFX, Silver- 
light et Flex. II existe aussi d'autres alternatives interessantes comme Open- 
Laszlo, mais nous ne I'integrerons pas dans notre comparatif prealable, pour 
eviter de brouiller les cartes. Nous nous focaliserons done sur les principales 
technologies utUisees et qui semblent etre directement concurrentes. 

• Ajax est un acronyme signifiant Asynchronous JavaScript And XML. 
Ajax n'est pas a proprement parler une technologie en soi, mais 
plutot un patchwork de technologies existantes ([X] HTML/Java- 
Script/XML), avec un modele de conception permettant de deve- 
lopper et de deployer des RIA. Ajax n' existe done pas concretement 
d'un point de vue technologique, plus assimilable a une methodo- 
logie qu'a une technologie. C'est certainement la methodologie de 
developpement RIA la plus connue et utilisee de nos jours. 

• Silverlight est I'alternative proposee depuis peu par Microsoft. Elle 
dispose de toute la puissance de feu marketing de la multinationale 
de Redmond et propose, objectivement, une belle alternative au 
developpement RIA. 

• Flex est une technologie developpee par Macromedia en 2004, reprise 
par Adobe en 2006. Sa principale caracteristique est d'utUiser le moteur 
virtuel Flash qui beneficie d'un taux de penetration exceptionnel sur 
Internet. Depuis plusieurs annees, ce taux evolue entre 97 et 98 %. 



Alternative JavaFX 



JavaFX est une famille de produits et de technolo- 
gies de Sun Microsystems, rendue publique lors de 
la conference de developpeurs JavaOne en 
mai 2007. Les produits JavaFX ont pour but de creer 
des applications RIA. Cependant, JavaFX ne semble 
plus beneficier aujourd'hui d'un grand support de la 
pari de Sun, et nombreux sont les developpeurs a 
avoir abandonne cette technologie. A suivre. . . 



Les benchmarks, une methode interessante 
pour evaluer une technologie 

L'une des methodes les plus objectives pour selectionner une technologie 
est de definir precisement les points critiques de cette derniere et de les 
comparer en fonction de vos besoins de developpeurs, mais aussi des 
attentes des utilisateurs. Concernant les RIA, trois elements sont parti- 
culierement importants : la vitesse d'execution au niveau du serveur, la 



B.A.BA Les benchmarks 



Un benchmark est un banc d'essai permettant de 
mesurer les performances d'un systeme comparati- 
vement a d'autres. 



!.A.BA Le format AMF 



AMF, {Action Message Format) est un format 
de donnees proprietaire cree par Macromedia, puis 
repris par Adobe. AIVIF est en fait un format 
binaire optimise pour les echanges client-serveur 
Nous utiliserons ce format tres efficace lors du 
developpement de notre etude de cas. 



URL Census 



Vous trouverez le benchmarl< Census sur le blog de 
James Ward a I'adresse : 
* http://www.jamesward.org/census/ 



bande passante utilisee et I'exploitation de la memoire sur le poste client. 
II existe quelques benchmarks comparant pertinemment les performances 
de certaines technologies. L'un des plus marquants est Census, de James 
Ward, qui le propose en Open Source sur son blog personnel. Les resul- 
tats de ce benchmark RIA sont sans appel : les performances de Flex 
associe au format AMF sont particulierement remarquables face aux 
autres alternatives. 

Bien entendu, un benchmark reste un benchmark, mais nous avons deja 
la un premier indice de reponse. II est possible de soumettre des correc- 
tifs ou d'aj outer de nouveaux tests pour eprouver la precision des resul- 
tats. Ces tests sont veritablement fiables, et nous expliquerons, dans les 
chapitres qui suivent, pourquoi Flex associe au format AMF est si per- 
formant comparativement aux autres technologies equivalentes. 



Figure 1-2 

Le benchmark Census demontre 

les qualites de Flex sur les autres 

alternatives 




Les environnements de developpement 

Pour le developpeur, une autre question importante s'impose 
rapidement : quel est le format de I'environnement de developpement 
propose par toutes ces technologies ? Plus I'outil de developpement sera 
complet et ergonomique, plus rapides et aisees seront la creation du code 
et I'adoption de la technologie. 

Concernant Ajax, il existe de nombreux frameworks facilitant son utili- 
sation. Ces frameworks sont principalement constitues de bibliotheques 
JavaScript permettant de concevoir les traitements asynchrones et 
d'ameliorer I'ergonomie globale avec une large palette d'outils. lis se 
basent uniquement sur JavaScript et ne contiennent aucun composant 
serveur, dans le but de ne pas dependre d'un langage particulier imple- 
mente cote serveur. La plupart de ces frameworks sont Open Source. 



Adobe propose plusieurs formules pour distribuer Flex. Depuis la 
version 3, I'integralite du framework Flex est disponible en Open 
Source. Pour le developpement, deux approches sont possibles. 

La premiere consiste a ecrire le code source dans un simple editeur de 
texte, puis de compiler ce code en utilisant le compilateur gratuit dispo- 
nible pour Flex. Vous pouvez ainsi travailler avec votre environnement 
de developpement de predilection sans cout supplementaire. 

La seconde approche consiste a utiliser I'environnement de developpe- 
ment qui porte le nom de Flex Builder, pour un cout relativement acces- 
sible. Cet EDI est con9u a partir de I'environnement Eclipse, ce qui 
permet de disposer de Flex Builder soit sous la forme d'un plug-in pour 
Eclipse, soit en tant qu'EDI independant. L'environnement de develop- 
pement de Flex Builder est tres complet, et con9u notamment sur le 
concept WYSIWYG ( What You See Is What You Get). II permet de creer 
et de compiler tres rapidement les fichiers MXML (un format de fichier 
identique au XML) et ActionScript pour le developpement des diffe- 
rentes routines evoluees. On peut done aisement comparer le couple 
XML/JavaScript d'Ajax au couple MXML/ ActionScript de Flex. 



ENSAVOIRPLUS Eclipse 



Eclipse est un environnement de developpement 
integre (EDI), lance par IBM, dont la principale 
caracteristique, outre le fait d'etre libre et exten- 
sible, est de permettre de mettre en oeuvre 
n'importe quel langage de programmation. Adobe 
Flex Builder 3 est notamment base sur Eclipse. 



« And the winner is 

Le developpeur habitue au tierce classique (X)HTML/CSS/JavaScript 
se tournera plus naturellement vers la solution Ajax. Le developpeur 
.NET sera plus sensible a la solution de Microsoft, Silverlight (integree 
au dernier Visual Studio), tandis que le developpeur connaissant Flash 
s'orientera rapidement en direction de son petit frere Flex. 

En dehors de ces considerations « affectives », les questions de rentabi- 
lite de developpement seront egalement posees. Ajax jouit d'une excel- 
lente reputation dans ce domaine, mais les retours d'experience des 
developpeurs sont parfois partages. Certains ne jureront que par Ajax et 
son modele Open Source qui est en effet tres seduisant et gratuit... De 
plus, avec Ajax, nous naviguons en terrain connu. Pas de mauvaise sur- 
prise, les technologies s'articulant autour du XML sont fiables, eprou- 
vees et securisantes. Cependant, certains developpeurs deploreront ce 
qui fait justement I'une des forces d'Ajax : son patchwork technologique. 
En effet, il est parfois plus difficile et plus long de developper des appli- 
cations RIA avec Ajax, en raison de la complexite — dans le genre « usine 
a gaz » — de la mise en oeuvre de tous ses sous-ensembles technologiques. 
Et qui dit difficulte de mise en oeuvre, dit egalement probleme de renta- 
bilite. Ce point est neanmoins discutable, car les technologies prises en 
charge par Ajax sont tres repandues (XHTML, XML, JavaScript, 
DOM, etc.). II est en effet plus facile de trouver un developpeur maitri- 



Remarque a propos de Silverlight 

Au moment ou nous ecrivons ces lignes, la techno- 
logie Silverlight de Microsoft est trop recente pour 
que Ton ait suffisamment de recul, et le retour 
d'experience des developpeurs est actuellement 
trop faible. II est en effet difficile de comparer Sil- 
verlight et ses concurrents selon le seul critere de 
la perspective de developpement et de deploie- 
ment. C'est la raison pour laquelle nous nousfoca- 
liserons sur un comparatif Ajax/Flex dans les 
paragraphes qui suivent. 



En SAVOIR plus Flex et Ajax collaborent 

Conscient de la notoriete d'Ajax au sein de la com- 
munaute des developpeurs, Adobe a mis en place 
une passerelle collaborative entre Flex et Ajax afin 
de permettre le deploiement des deux technolo- 
gies sur un meme projet. Le nom de cette passe- 
relle est Flex-Ajax Bridge (FABridge). 



B.A.BA Le deep linking 



Le deep linking (ou « lien profond ») est une 
technique consistent a creer un hyperlien qui 
pointe specifiquement vers une page ou toute 
autre ressource d'un site differente de sa page 
d'accueil. Decriee a tort par certains webmasters, 
I'utilisation de cette technique est pourtant recom- 
mandee par le W3C, qui precise de surcroTt que 
toute tentative d'interdire la pratique du deep lin- 
king est basee sur une mauvaise comprehension 
de cette technologie. Nous decrirons en annexe B 
pourquoi le deep linking est important avec Flex et 
comment I'utiliser a bon escient. 



sant plus ou moins bien les technologies Ajax que quelqu'un connaissant 
Flash/ActionScript. Bref, ce sujet est sensible et le debat reste largement 
ouvert puisque, disposant d'une tres importante communaute sur 
Internet, Ajax est et restera le standard du developpement Web 2.0. 

Mais en toute objectivite, nous pouvons remarquer que les applications 
developpees en Ajax ne sont pas toujours les plus seduisantes, d'un point 
de vue strictement visuel. L'ergonomie de I'interface utilisateur de cer- 
taines RIA Ajax semble meme un peu « retrograde » parfois. Et tandis 
que la gratuite de ce concept seduira certainement plus d'un deve- 
loppeur, attention toutefois a ce parametre : le choix de I'outil le moins 
cher n'equivaut pas forcement au choix le plus pertinent d'un point de 
vue purement economique. Parfois, I'argent economise lors de I'achat 
d'un outil de developpement est rapidement perdu a terme en raison du 
temps demande par I'utilisation de ce meme outil. Nous rejoignons ici 
un adage plein de bon sens : « Le temps, c'est de I'argent ! » 

La technologie Silverlight proposee par Microsoft est jeune. Au moment 
ou nous ecrivons ces lignes, Silverlight est encore dans sa phase de crois- 
sance. Seul I'avenir nous dira si cette technologie parviendra a s'imposer 
comme une veritable alternative pour le developpement de RIA. 

La troisieme solution est Flex, de I'editeur Adobe. Le premier « defaut » 
de cette technologie n'en est pas reellement un : elle s'appuie sur le 
moteur Flash 9.0. En effet, alors que Flash jouit d'une bonne reputation 
parmi les internautes qui I'ont rapidement adopte a I'unanimite (98 % 
pour etre precis), la communaute des developpeurs web est plus par- 
tagee. D'un cote, nous trouvons les « flasheurs » qui ont un avis plutot 
positif et, de I'autre, une (forte) communaute de developpeurs web plus 
sceptiques. En effet, pour certains developpeurs. Flash presente quel- 
ques defauts majeurs, tels que I'incapacite des moteurs de recherche a 
referencer du contenu Flash ou I'impossibilite de conserver un historique 
de navigation. Nous verrons lors du developpement de notre etude de 
cas que ces a priori negatifs sur Flash sont infondes aujourd'hui ou peu- 
vent etre rectifies via I'utilisation du deep linking dans Flex, par exemple. 
Mais les mauvaises reputations ont parfois la peau dure... 



La compatibilite, question cruciale 

Ce dernier point fait etat d'un debat encore plus large et passionne. En 
premiere analyse, force est de constater que la solution Ajax semble plus 
compatible que la solution Flex. En effet, le taux de penetration du 
couple XHTML/JavaScript est theoriquement de 100 % sur tous les 
navigateurs, alors que celui du couple Flex/ActionScript oscille entre 
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97 % et 98 %. La difference semble minime et a priori pas veritablement 
preoccupante. 

Mais cela n'est pas aussi simple. En realite, le plug-in JavaScript opere 
parfois de maniere differente en fonction du navigateur. De ce fait, la 
compatibilite du framework Ajax ne semble plus aussi assuree. Si un 
code JavaScript s'execute de maniere differente en fonction du naviga- 
teur, il est vraisemblable que, tot ou tard, des differences d'interpretation 
du code presenteront un probleme potentiel. Ajax tente de gommer les 
differences entre navigateurs par la creation de composants et de biblio- 
theques qui prennent en compte precisement ce defaut d'homogeneite 
entre navigateurs et systemes d'exploitation. La notion d'ubiquite 
demeure done floue concernant Ajax. II n'existe pas de statistiques sur la 
question, ce qui rend impossible la comparaison sur ce parametre avec 
un autre framework. Inversement, la notion d'ubiquite est reelle pour les 
applications Flex. Le moteur Flash utilise la meme machine virtuelle, 
quel que soit le systeme d'exploitation ou le navigateur. 

La problematique est done importante, car si vous avez besoin de per- 
sonnaliser un composant, de creer un nouveau controle ou d'etendre une 
bibliotheque en Ajax, il vous sera systematiquement obligatoire de veri- 
fier la compatibilite de votre code avec les differents navigateurs et sys- 
temes d'exploitation. Cet inconvenient peut s'averer minime dans le 
cadre du developpement et du deploiement de petits projets, mais peut 
generer toute une serie de problemes dans le cadre d'un projet d'enver- 
gure. C'est I'une des raisons pour laquelle le choix de I'utilisation d'Ajax 
pour des projets de grande taille doit etre reflechi, objectif et prudent. Et 
dans tous les cas, il sera necessaire de bien respecter les standards decrits 
par le W3C. Tout le monde ne possede pas les capacites financieres de 
Google pour developper un systeme similaire a Gmail en Ajax, deman- 
dant des delais aussi longs. 



B.A.BA La notion d'ubiquite 

En informatique, I'ubiquite permet a plusieurs sys- 
temes de partager la meme information. Le prin- 
cipe d'ubiquite est ainsi utilise pour les jeux en 
reseau, ou chaque joueur connecte visualise simul- 
tanement la meme chose sur son ecran que tous 
lesautres joueurs. 



Technologie Gmail 



Gmail est I'une des applications Ajax les plus 
representatives des possibilites offertes dans le 
domaine des RIA. Veritable fer de lance du 
Web 2.0, ce service webmail gratuit a ete deploye 
en avril 2004 et revolutionne le concept de sys- 
teme de messagerie avec de nombreuses fonction- 
nalites et une capacite de stockage tres 
importante (plusieurs gigaoctets). 



En resume 

Pour conclure cette (longue) introduction, nous insisterons sur le fait que 
le choix de I'utilisation de la technologie Flex pour le developpement de 
RIA est un choix pertinent. Les chapitres suivants vous presenteront le 
developpement d'une etude de cas qui utilise cette technologie en colla- 
boration avec d'autres technologies orientees serveur. Vous decouvrirez 
alors que les langages de programmation et I'API de Flex sont veritable- 
ment intuitifs et complets. lis offrent aux developpeurs la possibilite de 
concevoir des applications de maniere ludique et creative. Alors, pour- 
quoi s'en priver ? 



11 



chapitre 



2 




Descriptif de I'etude de cas 



Tout au long de cet ouvrage, nous allons suivre 
pas a pas le developpement d'une application RIA 
utilisant I'environnement de developpement Flex. Void 
les caracteristiques et fonctionnalites du projet MediaFoot. 



SOMMAIRE 

► Page d'accueil 

► Module d'edito 

► Galerie de photos 

► Base de donnees des joueurs 

► Les matchs en direct 

► Widget d'informations avec AIR 

MOTS-CLES 

► MXML 

► CSS 

► RPC 

► AMFPHP 

► Push Data 

► BlazeDS 

► Widget 

► AIR 



Telecharger Code source de I'application 

Le code source de I'application exemple est dispo- 
nible au telechargement a I'adresse suivante : 
* http://media.foot.free.fr/sources/ 



II est temps de decrire le contenu de I'application qui servira de fil con- 
ducteur a la presentation d'une application RIA. Cette application s'arti- 
culera sous la forme d'un portail dedie a I'affichage de contenu pour des 
evenements sportifs (et de football, en particulier, pour illustrer notre 
propos). Plutot que de proposer une etude de cas trop specifique et 
limitee a une ou deux fonctionnalites, I'idee de base consiste a deve- 
lopper une application permettant d'exploiter au maximum les qualites 
de Flex, notamment dans le domaine de I'acces aux donnees distantes, 
afin de presenter un tour d'horizon, le plus exhaustif possible, de cette 
technologie. Cela nous permettra aussi de comparer et d'evaluer plu- 
sieurs techniques existantes d'acces aux donnees. 

Ainsi, notre etude de cas (qui portera le nom explicite de « MediaFoot ») 
sera composee de plusieurs modules permettant I'application de diffe- 
rentes techniques utilisant Flex 3 et des technologies serveur. 
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Module 1 - Page d'accueil 

Le premier module se presentera sous la forme d'une page d'accueil 
{home page) et nous permettra d'introduire les concepts de base de Flex, 
comme la conception d'interface utilisateur en MXML et CSS (voir la 
presentation de la page d'accueil en debut de chapitre). Nous presente- 
rons aussi le langage de programmation ActionScript 3.0, un langage 
oriente objet complet et performant. 



Module 2 - Edito 

Le deuxieme module, sous la forme d'un « edito », nous permettra 
d'aborder I'integration d'un fichier XML externe a I'application Flex, 
ainsi que du contenu texte et des images. Nous introduirons egalement 
differentes fonctionnalites de Flex, comme le principe des etats d'affi- 
chage {vieiu states), des effets et des transitions. 




B.A.BA Le langage MXML 



Le langage MXML est un langage proprietaire de 
description derive du XML, qui permet de decrire 
des interfaces utilisateur pour le developpement 
d'applications RIA. Ce langage a ete congu par la 
societe Macromedia lors du lancement de la pre- 
miere version de Flex. Nous I'utiliserons intensive- 
ment pour decrire I'interface utilisateur de notre 
etude de cas. 



B.A.BA Le langage CSS 

Le langage CSS sert a decrire la presentation des 
documents HTML et XML. II est egalement opera- 
tionnel avec le langage MXML. CSS signifie Casza- 
ding Style Sheets (feuilles de style en cascade) 
et est reglemente par le W3C. 



Figure 2-2 

Module n° 2 « Edito » : 

chargement dynamique du XML dans Flex 



S 



I 



15 



Module 3 - Photo Galerie 

Avec le troisieme module « Photo Galerie », nous presenterons une 
galerie de photos con9ue avec Flex. Ce module permettra d'afficher une 
serie de photos en utilisant les outils de rendu d'elements {item Tenderers) 
avec Flex. 



Figure 2-3 

Module n° 3 « Photo Galerie » : conception 
d'une galerie d'images simple avec Flex 
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Module 4 - Base de donnees « Joueurs 



» 



B.A.BA Le protocole RPC 



Dans le quatrieme module, nous introduirons I'acces distant vers une 
base de donnees MySQL utilisant le protocole RPC dans Flex avec la 
librairie AMFPHP qui permet de connecter Flex a un serveur en PHP, 
et en utilisant I'incontournable format AMF 



Le protocole RPC {Remote Procedure Call) 
permet de faire des appels de procedures sur un 
ordinateur distant a I'aide d'un serveur d'applica- 
tions (modele client-serveur). 



S 
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Figure 2-4 

Module n° 4 « Base de donnees Joueurs » : 
connexion distante avec une base de donnees 
MySQL via la passerelie AMFPHP 
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Module 5 - Match Live 



Technologie BlazeDS 



BlazeDS est un sous-ensemble du projet LiveCycle 
Data Services (LCDS) d'Adobe. Cette solution ser- 
veur permet notamment de faire du push data, 
du remoting, du messaging, etc. Cette solution 
est libre et gratuite, contrairement a LCDS. 



Le cinquieme module nous permettra de mettre en oeuvre I'une des 
fonctionnalites les plus interessantes du concept RIA : le push data (don- 
nees de diffusion personnalisee) et I'affichage d'informations en temps 
reel. Nous verrons comment peut s'integrer cette fonctionnalite avec 
Flex et le tout recent BlazeDS, une solution serveur d'Adobe. Ce 
module nous propose de suivre en temps reel les resultats et les commen- 
taires d'un match de football. 



MEDIA FOOT 



RICH INTERNET EXPERIENCE - SPORT MEDIA LABORATORY 



Figure 2-5 

Module n° 5 « Match Live »: 
le push data avec Flex et BlazeDS 
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Widget dinformations avec AIR 

Enfin, nous terminerons le developpement de notre etude de cas en 
introduisant la conception d'une RDA avec Adobe AIR, integre desor- 
mais dans Flex 3, sous la forme d un ividget d'informations (news). 



B.A.BA Les widgets 



MEDIAFOOT - NEWS READER - 5 Noyembre 200S 



Longtemps bouscules par la 
Fiorentina, les Bavarois ont su 
egaliser en fin de rencontre [1- 
^2 J-) pour prendre le point qu'ils 
B desiraient. 



Les Florentins ont livre un gros match devant 
leur public mais ont paye leurs efforts et 
restent troisiemes du groupe F, a cinq 
longueurs du Bayern et de Lyon. 



•} 



Un widget (dans sa fonctionnalite de bureau) est 
un petit outil qui permet d'obtenir des informa- 
tions comme la meteo, le trafic routier, les actua- 
lites, etc. Le mot widget signifie egalement 
« gadget » en anglais americain. 



S 



I 



Figure 2-6 

Application AIR : 

le widget d'informations 



En resume 

Dans ce chapitre, nous avons liste les differentes fonctionnalites du projet 
sous forme de modules independants. Le chapitre suivant va introduire la 
seconde etape du processus de developpement de notre application RIA 
en mettant en oeuvre son principal outil : Adobe Flex Builder 3. 
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B.A.BA Le format SWF 



L'extension SWF est celle utilisee pour les fichiers 
compiles de la machine virtuelle Flash. Initiale- 
ment, SWF signifiait Shockwave Flash, a ne pas 
confondre avec le format Shockwave de la meme 
societe (Macromedia puis Adobe), qui est dedie au 
format web du logiciel Director (extension .dcr). 



FUTUR Thermo 



Adobe travaille sur une nouvelle technologic 
- nom de code Thermo - qui permettra aux desi- 
gners de concevoir plus aisement des interfaces 
utilisateur dediees a Flex. Ce futur produit d'Adobe 
va simplifier les echanges entre les designers et les 
developpeurs de RIA. Avec Thermo, un designer 
pourra creer des IHM applicatives {wireframes) 
et importer des elements graphiques congus avec 
Photoshop, Fireworks ou Illustrator, par exemple. 
Le fosse entre webdesign et developpement pour- 
rait ainsi etre reduit grace a Thermo (voir la pre- 
sentation de Thermo en annexe A). 



B.A.BA SDK 



SDK est I'abreviation de Software Develop- 
mer)t Kit (kit de developpement logiciel). 



Flex est le terme usite pour decrire un ensemble d'entites logicielles spe- 
cifiquement dediees a la conception d'applications RIA et RDA. Flex 
est egalement le nom d'un environnement de developpement qui s'exe- 
cute dans le Flash Player 9. Contrairement aux autres alternatives de 
developpement RIA, Flex repose done sur la machine virtuelle Flash 
plutot que sur les performances du moteur JavaScript d'un navigateur. 

Flex permet ainsi de creer des interfaces clientes efficaces, evoluees et a 
hautes performances, en vue d'un deploiement pour un site web ou des 
applications intranet et en entreprise. Grace au lecteur Flash, les appli- 
cations Flex s'executent a I'identique sur tous les navigateurs, quel que 
soit le systeme d'exploitation. C'est un point qui demarque Flex des 
autres alternatives de developpement RIA. 

Tout comme Flash, Flex genere des fichiers au format SWF, interpreta- 
bles par le lecteur Flash (Flash Player). Cependant, Flex est un outil 
specifiquement dedie aux developpeurs, contrairement a Flash qui est 
oriente designers et developpeurs. 

Depuis plusieurs annees, la societe Macromedia, puis Adobe, a fait evoluer 
la technologie Flash afin de diffliser un socle d'application performant et 
complet. La toute derniere machine virtuelle de Flash, AVM2 (nom de 
code, Tamarin) est desormais Open Source. Elle est operationnelle via le 
dernier lecteur Flash, version 9, qui est utilise par Flex. Ce socle applicatif 
a ete specifiquement con9u pour supporter des charges de calculs impor- 
tantes. Et depuis sa creation. Flash s'est specialise tout particulierement 
dans I'interaction d'animations vectorielles, mais aussi, depuis quelques 
annees, dans la gestion des medias comme le son et la video. Flex beneficie 
done de toutes les caracteristiques et qualites de I'univers Flash. 

Dans ce chapitre, nous allons passer en revue les differents outils pro- 
poses par I'environnement Flex, la procedure d'installation puis la des- 
cription des fonctionnalites fondamentales de Flex. 



Flex, environnement de developpement Integre 

La version 3 de Flex est disponible depuis le debut de I'annee 2008. Flex 3 
represente une evolution importante de Flex 2. L'ouverture vers I'Open 
Source est confirmee et de nombreuses innovations ont ete implementees. 
Comme prevu, A est desormais possible, depuis la version 2, de creer gra- 
tuitement des applications Flex via le Flex SDK Open Source qui inclut : 

• le framework Flex, contenant lui-meme I'integralite des bibliothe- 
ques de classes predeterminees et les services d'application ; 

• le compilateur autonome. 
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Ce kit de developpement vous permet de creer sans contrainte et en 
toute liberte du contenu SWF utilisant la technologie Flex. Un simple 
editeur de texte permettra d'ecrire le code de votre application. 

Cependant, en vue d'une productivite optimale, il est conseille d'utiliser 
le Flex Builder, un EDI base sur Eclipse, qui inclut bien entendu le 
SDK, mais aussi des outils dotes d'indicateurs de code intelligents per- 
mettant une conception graphique complete de I'interface utilisateur. 
Ceux-ci comprennent notamment un debogueur interactif, des profi- 
leurs de memoire ainsi que des tests fonctionnels automatises, le tout 
accelerant le developpement et ameliorant les performances applicatives. 
Cet outil n'est pas gratuit cependant, mais une version d'evaluation de 
60 jours est disponible sur le site d'Adobe. Pour I'instant, Flex Builder 3 
est disponible uniquement en anglais. 

II existe egalement un autre outil portant le nom evocateur de Flex 
Charting, dedie a la creation de composants de representation graphique 
avances (tres utile pour afficher des statistiques, notamment). Cepen- 
dant, il n'est pas disponible dans la version standard de Flex, mais uni- 
quement dans la version dite « professionnelle », dont le cout est bien 
evidemment superieur. 



m 



Clin d'sil Le projet Eclipse 



Le projet a ete lance par IBM, ce qui expliquerait le 
choix du nom « Eclipse ». En effet, les ingenieurs 
d'lBM auraient choisi ce nom par derision vis-a-vis 
de leur principal concurrent, sachant que le crea- 
teur de Java est Sun, en anglais « soleil »... con- 
current qu'lBM sembleraitvouloir « eclipser ». 



Developpement et deploiement d'une application 
Flex classique 

Les figures 3-1 a 3-5 presentent le processus d'interaction habituel entre 
les trois entites Developpeur, Serveur (+ base de donnees) et Client 
(internaute). 



Ba^e tin dgnnws 



Internaute / client 




peveloppeur 



Figure 3-1 

Interaction developpeur/serveur/client, 
schema de fonctionnement 
d'une application RIA classique 



Le developpeur compile done son application RIA avec, par exemple, 
I'outil Flex Builder. II genere ainsi un fichier au format SWF (figure 3-2). 
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Figure 3-2 

Le modele de fonctionnement 
d'une application RIA classique 



Intern a ute / client 




Figure 3-3 

Transfert du ficlnier SWF sur le serveur 



Ensuite, le developpeur transfere le fichier SWF sur le serveur (figure 3-3). 



Base d« donneps 



Intemaute / client 




Developpeur 



Figure 3-4 

Requete de telechargement du fichier SWF 



Le fichier SWF est disponible sur le serveur. L'internaute va se con- 
necter au site et envoyer une requete pour receptionner le fichier SWF 
qui se chargera dans son navigateur (figure 3-4). 



Base de donnees 
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Developpeur 
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En reponse, le serveur envoie le fichier SWF vers le poste client. Son 
contenu s'affiche sur I'ordinateur de I'internaute (figure 3-5). 



Base (Je donnees 




peveloppeur 



m 



E 



Figure 3-5 

Telechargement du fichier SWF 
sur le poste client et execution 



Les langages de Flex 

Le SDK de Flex integre trois langages : 

• le langage MXML, langage de description qui permet de decrire une 
interface en XML ; 

• I'ActionScript 3.0, langage de programmation oriente objet standard 
ECMA 4, dont la syntaxe est proche de celle de Java, standard 
ECMAScript 262. Ce langage est deja utilise par les programmeurs 
Flash depuis la version CS3. II est complet et performant, livre avec 
une bibliotheque de composants standards (classes AS3, extensibles 
comme en Java) ; 

• le langage CSS 1.0 qui sert a decrire des presentations de documents, 
dont ceux construits en MXML. 

L'environnement de developpement de Flex dispose de nombreux com- 
posants tels que des boutons, des champs de texte, Acs panels (panneaux), 
des onglets, des canvas (canevas), des datagrid (grilles de donnees) 
avances, etc. 

De plus, certains frameworks MVC Open Source permettent de struc- 
turer son projet et le code pour optimiser le travail modulaire et evolutif, 
notamment pour les projets d'envergure necessitant une equipe de plu- 
sieurs developpeurs. Les frameworks MVC Open Source les plus utilises 
avec Flex sont Cairngorm et PureMVC. 



COMPARATIF Ajax 



Pour etablir un parallele, la technologie Ajax utilise 
les langages XML+XHTML, JavaScript et CSS pour 
la realisation d'applications RIA. Flex utilise, lui, 
les langages MXML, ActionScript et CSS. 



En savoir plus 
La methode de conception MVC 

MVC est I'abreviation de Modele-Vue-Controleur 
(ou Model-View-Controller en anglais). C'est 
une architecture (et une methode de conception) 
qui organise I'interface IHM d'un programme logi- 
ciel. II separe I'lHM en un modele (le modele de 
donnees), une vue (interface utilisateur, presenta- 
tion) et un controleur (logique de controle, gestion 
des evenements, synchronisation). 
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La normalisation du langage ActionScript 3.0 

ActionScript 3 suit la norme definie par le comite ECMA. Rappelons 
que I'ECMA {European association for standardizing information and 
communication systems) est une organisation de normalisation qui 
s'occupe de developper les standards concernant les langages de script et 
de programmation (entre autres). Dans ce cadre, I'ECMA est en charge 
du standard ECMAScript dont s'inspire ActionScript 3.0 (ou AS3) 
pour I'edition 4. Ce standard devait definir la nouvelle orientation des 
langages de script, dont AS3 fait partie, en ameliorant considerablement 
la puissance de calcul et la rigueur dans la programmation d'application 
cote client. Adobe a collabore avec I'ECMA dans ce sens pour faire evo- 
luer la norme et la maintenir a jour pendant de nombreuses annees. 
Malheureusement, le comite ECMA a decide, au second semestre 2008, 
de cesser tous les travaux en cours sur la version 4 de I'ECMAScript afin 
de se concentrer sur la version 3.1 dont depend le JavaScript actuel. Ce 
revirement, approuve par Microsoft, Apple, Yahoo et Dojo est regret- 
table. ActionScript 3.0 continuera certes a evoluer mais, jusqu'a nouvel 
ordre, il ne suivra plus fidelement le standard ECMA. 

Communiquer avec le monde exterieur 

Flex est une technologie de developpement orientee client {front-end) 
specialisee dans la conception de media r\ch.c{rich media). . Flex n'est 
done pas un outil de developpement oriente serveur {back-end). Les con- 
necteurs du SDK permettent toutefois d'invoquer toutes sortes de tech- 
nologies back-end, sans remettre en cause votre couche metier. 
L'interfa9age entre vos technologies serveur et Flex est quasi transpa- 
rente. Tout ce qui etait possible avec le Web classique le demeure : ser- 
vices web (SOAP), services Java declares sur serveur, invocation de 
scripts REST, etc. Flex est con9u pour pouvoir s'interfacer aisement avec 
tous les serveurs web de presentation, sans restriction vis-a-vis du lan- 
gage de script : ASRNET, Ruby, PHP, JSP, etc. 

De plus, Adobe rend disponibles deux nouvelles applications facilitant 
I'utilisation de services serveur J2EE : LifeCycle Data Services (LCDS, 
anciennement Flex Data Service) et BlazeDS (solution plus limitee que 
LCDS, mais libre). Ces deux applications serveur sont a deployer sur le 
serveur web. Elles permettent d'utiliser Flex en application cliente avec 
des services serveur en support, tels que RPC {Remote Procedure Caltj, 
messagerie, difflision de donnees en temps reel {push data), persistance 
des donnees, Flex-Ajax Bridge, JMS {Java Message Service), etc. Nous 
verrons, lors du developpement de notre etude de cas, comment utiliser 
et deployer ces applications avec la passerelle AMFPHP et BladeDS. 
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Quoi de neuf dans Flex Builder 3 ? 

Voici une presentation rapide de I'environnement de developpement 
Flex Builder 3 que nous utiliserons pour concevoir les applications Flex 
et AIR de notre etude de cas. Vous trouverez une version d'evaluation de 
Flex Builder 3 sur le site d'Adobe (www.adobe.fr). 

Selon Adobe, Flex Builder fournit des outils de programmation 
« puissants ». Plus objectivement, Flex Builder est un environnement de 
developpement integre qui repond a tous les standards de tous les IDE 
evolues con9us sur Eclipse. Flex Builder contient des editeurs pour les 
langages MXML, ActionScript 3.0 et CSS, avec mise en couleurs de la 
syntaxe, assistance a la saisie des instructions (completion automatique), 
masquage du code et debogage detaille interactif, entre autres. 

Prise en charge native du developpement pour AIR 

L'une des grandes nouveautes du dernier Flex Builder 3 est la possibilite 
de creer des applications RDA pour AIR tres rapidement et avec une 
facilite, disons-le, deconcertante. Flex Builder 3 dispose de tous les 
outils necessaires pour developper, deboguer, compiler et deployer des 
RDA avec AIR. La prise en charge des desktops RDA AIR fait partie 
integrante de Flex Builder 3. 

Interaction avec le monde exterieur 

Nous n'avons pas encore suffisamment insiste sur un point critique con- 
cernant le developpement de notre etude de cas. Flex est une techno- 
logie incroyablement performante pour le developpement RIA. C'est un 
systeme tres sophistique et tres complet. Mais il ne peut pas directement 
« s'attaquer » a votre couche de logique metier (middleware) ni meme a 
une base de donnees. II faut done mettre en oeuvre differents moyens 
pour interagir avec votre back-end. Heureusement, tout est (presque) 
possible cote serveur. Les applications Flex seront connectees en utili- 
sant le modele de developpement n-tiers, permettant d'associer aux 
interfaces utilisateur plusieurs technologies cote serveur (Java, 
ASRNET, PHP, etc.). 
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Attention Version Linux en Alpha 

Flex Builder est construit a partir de la techno- 
logie Eclipse : il est disponible uniquement pour 
les systemes d'exploitation MAC OS X et Win- 
dows. Cependant, une version Linux est en cours 
de conception chez Adobe (nom de code « alpha 
4 »). Comme il est habituellement de mise chez 
Adobe, il existe deux versions de Flex Builder 3. 
Une version « Standard » et une version dite 
« Professional ». 



NOUVEAUTE 
Moteur de refactorisation de code 

La refactorisation (traduction maladroite de 
I'anglais refactoring, qui signifie en fait 
« reusinage » ou, plus exactement, « refonte de 
code ») est une operation de maintenance du 
code. Evolution notoire depuis Flex Builder 2, le 
nouveau moteur de refactorisation Flex Builder 3 
permet de naviguer rapidement a I'interieur du 
code ou de le restructurer intuitivement en renom- 
mant toutes les references a une classe, a une 
methode ou a une variable. 



NouVEAUTE Systeme d'optimisation 
de flux de production 

Avec Flex Builder, on peut dire qu'Adobe fait tout 
pour faciliter la vie des developpeurs ! La derniere 
version contient desormais un systeme d'optimisa- 
tion des flux de production de projets. De nou- 
veaux assistants de projet permettent en effet de 
gerer les systemes back-end les plus courants : 
PHP, ASPNET, ColdFusion ou Java. 



Optimiser les performances de son code 

L'une des caracteristiques les plus interessantes de Flex Builder 3 reside 
dans I'utilisation des outils de tests de performance (attention, pour 
I'edition Professional uniquement). Grace aux profileurs de memoire et 
de performance, nous pouvons ameliorer les capacites applicatives au 
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moyen d'outils de suivi et d'analyse, appropries a la consommation de 
memoire et aux cycles processeur. Nous verrons comment utiliser ces 
outils lors du developpement de notre etude de cas. 



File Edit Source Navigate Search Project Profile Data Run Window Help 



^ I ^ Flex Profiling | 



C$ Profile £3 C$ Saved Profiling Data 



D^ DD 



js\m^A = \/i<^\x 



B ^ localhost 

■ -SL [Running] file;///E;/MediaFool:/MediaFool:/bin-debug/MediaFool:.swf 



S Console ! S Memory Usage £3 j 
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Figure 3-6 Le nouveau profileur de Flex permet d'analyser et d'optimiser votre application RIA 



Telechargement Version d'evaluation 

Vous trouverez une version d'evaluation limitee a 
30 jours sur le site d'Adobe (www.adobe.com). 
II n'existe pas encore de version en langue fran- 
gaise. 



Le Workbench Flex Builder 3 

Apres installation de I'EDI, lors de la premiere ouverture, vous trouverez 
la desormais classique Start Page visible sur quasiment tous les EDI 
depuis quelques annees (voir la figure 3-7). Cette page fournit quelques 
liens, tutoriels basiques et des ressources externes plus ou moins utiles. 
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Flex Development 



-Adobe Flex Builder 3 



File Edit Navigate Search Project Data Run Window Help 
'^ Flex Navigator £3 J 



B^ 



a- Outline ^ 



An outline is not available. 
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Figure 3-7 Premier contact avec renvironnement de developpement Flex Builder 3 



Nous ne nous etendrons pas sur toutes les fonctionnalites de I'EDI, car 
ce n'est pas I'objet de cet ouvrage. En revanche, nous detaillerons les 
fonctionnalites utiles au developpement de notre etude de cas, suffisam- 
ment peu specifique mais variee, afin de couvrir les principales fonction- 
nalites interessantes du developpement RIA avec Flex. 

L'interface complete d'Eclipse se nomme le Workbench. Litteralement, 
un workbench signifie un « etabli » en fran9ais. Cette traduction est 
plutot pertinente. En effet, notre workbench nous fournit tous les outils 
et « materiaux » necessaires au developpement RIA avec Flex : 

• une barre de menus {menu bar) ; 

• une barre d'outils {toolbar) ; 



ASTUCE Maximiser la surface de travail 

En double-cliquant sur I'onglet F/ex Start Vage, 
vous maximisez la surface de la fenetre selec- 
tionnee. Cette fonctionnalite s'applique a tout 
moment, quel que soit I'onglet selectionne, et quel 
que soit le format du code source affiche (MXML, 
ActionScript ou CSS). 



'13 Flex start Page £3 



Figure 3-8 Onglet Flex Start Page 
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Clind'sil Icone Eclipse 



L'icone Eclipse est visible sur le cote droit de la 
Flex Start Page. En cliquant dessus, vous acce- 
derez a quelques informations sur la technologie a 
partir de laquelle est construit Flex Builder. Rappe- 
lons qu'Eclipse est le socle de nombreux outils uti- 
lisant par exemple les langages Java ou C++. 



Figure 3-9 



differents panneaux ou vues (views) ; 
des perspectives. 



Le SAVIEZ-VOUS ? Plug-in Eclipse 

Lesdeveloppeursqui utilisentdeja Eclipse peuventse procurer simplementune version plug- 
in de Flex pour I'ajouter a leur environnement. Les autres installeront une version dite stan- 
dalone (autonome), sous la forme d'un paquetage integrant Eclipse et Flex, ideal pour les 
developpeurs ne prevoyant pas d'utiliser Eclipse en dehors de developpements d'applica- 
tions avec Flex. Cependant, des plug-ins pour d'autres langages et technologies (C++, Java, 
ColdFusion, etc.) pourront toujours etre ulterieurement ajoutes a la configuration autonome. 



Figure 3-10 

Barre de menus 



La barre de menus 

La barre de menus (figure 3-10) permet d'acceder a toutes les com- 
mandes disponibles dans Flex Builder. 

File Edit Navigate Search Project Data Run Window Help 



Figure 3-11 

Flex Builder Toolbar 



La barre d'outils 

Les commandes les plus couramment utilisees sont accessibles via la 
barre d'outils (ou toolbar) de Flex Builder (figure 3-11). 



ASTUCE Acces aux vues 



Les principales vues sont accessibles directement 
par le menu W/ndow de la barre de menus. 



Les differentes vues 

Dans Flex Builder, les panneaux sont appeles des « vues » (views). Les 
vues disponibles par defaut sont : 

• Flex Navigator ; 

• Editor ; 

• Outline ; 

• Problems. 
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Flex Navigator 

La vue Flex Navigator affiche les projets et fichiers sous la forme d'une 
arborescence classique. Pas tres original, mais intuitif, et finalement tres 
pratique pour avoir un acces aux fichiers sources et pour avoir une vue 
globale de notre projet en cours de developpement. 

Editor 

La principale fenetre est aussi la plus grande par defaut. Elle porte le 
nom tres pertinent de fenetre Editor. Tout fichier contenant du code 
source (MXML, ActionScript, CSS) apparaitra dans cette fenetre sous 
un onglet unique Tidentifiant avec le nom du fichier. 



I Flex Start Page ^ Boutique. mxml 

I'T'^ackaye com. fusion . ui { 



B f^^diaFoot.mxml ^Reflection. as ^1 
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In^ort iriK . core . UlCoinponent ; 

In^ort flash. display. DisplayObject; 

In^ort flash. display. Bitmap; 

In^ort flash. display. EitmapData; 

In^ort flash. events . Event; 

In^ort niK . events . FlexEvent; 

In^ort flash. geom. Matrix; 

In^ort flash. geom. Rectangle; 

iji^ort flash, display. Graphics; 

Iji^ort flash, display. GradiennType; 

Iji^ort flash, display. Shape; 

iji^ort flash, geom. Point ; 

iji^ort flash, display. ElendHode; 

pTibXlc class Reflection extends UlComponent [ 

DuhHc var target : UlComponent; 

piibJ-ic var bitmap : Bitmap = new Bitmap [new BitmapData ( 1, 1, true, ) ] ; 

piibJ.ic var gr: Graphics; 

piibJ.ic var f adeFrom:Nuiiriber = 0.3; 

EiiibJ.ic var fade To : Number = 0; 

EitLbJ-ic var f adeCenter iHuinber = 0.5; 

EiiibJ.ic var 3hewX:Nuiriber = 0; 

BiibJ.ic var scale :Nuiriber = 1; 

EiiibJ.ic function ReflectionO ivoid { 
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Figure 3-12 

La vue Flex Navigator 



Figure 3-13 

La vue Editor 



La vue Editor integre deux modes d'edition. Le mode Source, selectionne 
par defaut, affiche le contenu du code source d'un fichier, tandis que le 
mode Design lui permet d'interagir avec les composants decrits dans un 
fichier MXML ou CSS. 

Le mode Design disponible pour un fichier MXML peut, par exemple, 
permettre d'interagir avec des objets graphiques, des textes, des compo- 
sants divers et varies, selon le principe cher a Macromedia puis a Adobe, 
du WYSIWIG pour les amateurs de I'editeur Dreamweaver. Vous 
pouvez, par exemple, deplacer des elements d'interface utilisateur ou 
changer directement certaines proprietes ou certains contenus, sans cor- 



AlTENTION Le mode Design 

Notez bien que ce mode Design n'est acces- 
sible qu'aux fichiers MXML ou CSS et non pas 
bien evidemment aux ficliiers ActionScript qui 
contiennent du code uniquement « non 
visualisable ». En effet, le code ActionScript 
peut etre assimilable dans le principe a du code 
JavaScript, alors que le langage de description 
MXML est plus comparable a du code HTML. 
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ACRONYME Le concept WYSIWYG 

WYSIWYG est racronyme anglais pour What You 
See Is What You Get (en frangais : « ce que 
vous voyez est ce que vous obtenez »). Autrement 
dit, dans le cas du developpement d'une interface 
utilisateur, le developpeur voit directement a 
I'ecran ce a quoi ressemblera le resultat final. Le 
logiciel Adobe Dreamweaver est un exemple d'edi- 
teur WYSIWYG pour pages web. 



Figure 3-14 

La mode Design de la vue Editor 



ASTUCE Autoselection de code 

Quand vous cliquez sur le bouton Source Mode 
pour revenir au mode d'affichage du code source, 
le code du dernier composant selectionne en mode 
Design est surligne. Voici une fonctionnalite tres 
pratique pour travailler de fagon ergonomique sur 
les proprietes d'un composant, directement a 
partir de son code de description MXML. 



riger une seule ligne de code. Toute modification effectuee en mode 
Design sera bien entendu automatiquement reportee dans le mode Source. 



^ MediaFoot.mxml ^ mediaFoot.css ra Hnmfi.myml IZ ' 3 

R^ Source [3] Design j ,0 |^ Design area; | Same as component v | 1^ O ®^ 1 100% > 




En selectionnant un composant de la vue Editor en mode Design, vous 
accedez au panneau Flex Properties qui permet de modifier directement 
les proprietes du composant selectionne. Toutes les proprietes du com- 
posant selectionne sont ainsi modifiables, comme la couleur d'un bloc de 
texte, par exemple. 



Outline 

Si vous souhaitez selectionner un autre composant de votre code, vous 
pouvez utiliser la vue Outline. Elle affiche des raccourcis vers tous les 
composants de votre application. Vous avez ainsi un acces rapide et 
direct a toutes les portions de code relatives a vos composants. 

Nous avons a present fait le tour des principaux panneaux et vues du 
Workbench de Flex Builder. Interessons-nous desormais aux fonction- 
nalites et parametrages les plus utiles du Builder pour le developpement 
de notre etude de cas. 
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Figure 3-15 

Le panneau Flex Properties d'un composant texte 



Figure 3-16 

La vue Outline permet un acces direct aux composants 
disponibles dans la vue Editor. 



Compilation automatique d'un projet 

En cliquant sur le menu Project de la barre de menus, vous verifierez que 
I'option Build Automatically est selectionnee par defaut. Cette option 
permet a Flex Builder de compiler automatiquement votre application. 
Ainsi, a chaque sauvegarde de votre projet, une liste d'erreurs de compi- 
lation sera, le cas echeant, affichee. 



Identifier les erreurs grace a la vue Problems 

En sauvegardant un fichier source, les eventuelles erreurs de compilation 
s'afficheront dans la vue Problems. 



ASTUCE Sauvegarde automatique 

Tous les fichiers non sauvegardes et visibles dans 
la vue Editor sent precedes par un asterisque * 
dans leur onglet respectif. Si I'option Build Auto- 
matically est selectionnee, apres chaque compi- 
lation tous les fichiers seront automatiquement 
sauvegardes et I'asterisque disparaTtra. 

ra *Home.mxml ^ 

Figure 3-17 



^fffttjutawMrf^^ Search 


-J. - = Q 1 


1 error, warnings, infos 


Description -*' Resource Path | Location | 


3 tr Errors (1 item) 


© The value of attribute "backgroundlmage" must not contain the '<' character. Home.mxml MediaFoot/views line 8 









Figure 3-18 

La vue Problems 
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L'exemple de la figure 3-18 indique qu'une erreur de syntaxe est a I'ori- 
gine d'une mauvaise interpretation d'une instruction. Pour localiser 
I'erreur de code dans le fichier source, vous pouvez directement double- 
cliquer sur le message d'erreur dans la vue Problems. La portion de code 
incriminee sera immediatement selectionnee dans la vue Editor. En cor- 
rigeant le probleme, I'erreur disparaitra de la vue Problems a la prochaine 
sauvegarde et/ou compilation du projet. 

Changer de perspective 

Les vues du Workbench de Flex Builder peuvent etre configurees en 
Perspectives. Ces « perspectives » sont generalement organisees a partir 
de taches communes. Pour permuter les differentes perspectives, il faut 
cliquer sur le bouton Open Perpectives, en haut a gauche de la vue Editor, 
sur I'icone de la figure 3-19. 



Figure 3-19 

Bouton de permutation des perspectives 



I Flex Develop.. 



Flex Development 
^ Flex Profiling 



n 



ASTUCE Creation de perspectives 

Vous pouvez creer ou modifier des perspectives en 
utilisant les options accessibles dans la barre de 
menus via Wmdow>Perspect\ve. 



En cliquant sur le bouton Oper) Perspectives, vous pourrez acceder aux 
differentes perspectives relatives a notre etude de cas. La perspective 
selectionnee par defaut est flex Development. En selectionnant la pers- 
pective flex Debugging, vous obtiendrez une nouvelle organisation des 
vues afin d'optimiser la configuration de Flex lors du debogage de votre 
application. 
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En resume 

Ce tour d'horizon du logiciel Flex Builder 3 n'est bien entendu pas 
exhaustif. Cependant, nous avons presente ici les fonctionnalites les plus 
courantes qui seront utilisees a de nombreuses reprises lors du develop- 
pement de notre etude de cas. Poursuivons dans le chapitre suivant avec 
le developpement de la premiere partie du projet et I'utilisation du Ian- 
gage MXML pour concevoir une interface utilisateur. 
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B.A.BA LeIangageCSS 



CSS est I'abreviation pour Cascading Style 
Sheets (feuilles de style en cascade). Ce langage 
est normalise par le comite W3C. Pour rappel, une 
feuille de style est une collection de regies qui spe- 
cifient la presentation d'un document.Chaque 
regie decrit le style d'un element precis a I'inte- 
rieur d'un document au format HTML ou bien XML. 
Flex permet d'integrer ces feuilles de style (version 
CSS 1), ce qui nous permet done de definir le style 
de nos composants MXML. 



La conception d'une application RIA avec la technologie Flex s'articule 
autour de trois langages : 

• le langage MXML qui permet de decrire des interfaces utilisateur 
evoluees et interactives orientees RIA ; 

• le langage ActionScript 3.0 qui est un langage de script objet, trans- 
position pour Flash/Flex de la norme ECMAScript ; 

• le langage de style CSS qui reprend les specifications definies pour 
CSSl. 

Le developpement d'une application RIA interactive avec Flex necessite 
done de bien maitriser les interactions entre I'interface MXML et les 
objets ActionScript. A cet effet, il faut done commencer par assimiler le 
codage d'une interface en MXML avec Flex Builder 3 — fondamentaux 
que nous allons decouvrir en commen9ant par la conception de structure 
de notre etude de cas. 



Creation du workspace et du projet 
MediaFoot 

Toute application RIA developpe en Flex commence par la creation 
d'un projet et d'un workspace. 

II ne faut pas confondre un workspace (espace de travail) avec le work- 
bench defini dans le chapitre precedent. Alors que le workbench definit 
I'environnement de developpement (barre de menus, barre d'outils, vues 
et perspectives), le workspace est un repertoire de fichiers systeme qui 
contient tous les fichiers et sous-repertoires qui enregistrent un groupe 
de projets dans Eclipse. Vous pouvez verifier I'emplacement par defaut 
de votre workspace en selectionnant Fi\e>Swltch Workspace>Other. 



ASTUCE Creation d'un projet 

Vous pouvez aussi creer votre projet avec un die 
droit de souris dans la vue Flex Navigator, en 
selectionnant New>Flex Project. 



Creer le projet 

Un projet cree avec Flex Builder consiste en un groupe de ressources 
constituant une application Flex. Le projet est done cree dans le works- 
pace Flex. Le projet de notre etude de cas est ainsi genere en selection- 
nant File>New>Flex Project. Cette option execute un assistant de creation 
de projet. 

Dans ce chapitre, le nom du projet (Project name) sera MediaFoot_chap4. 
Vous pouvez preciser I'emplacement du projet dans le workspace defini 
par defaut. Dans ce cas, cochez la case Use default location dans la section 
Project location. 
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Le type d'application que nous utiliserons ici sera bien entendu une 
application web utilisant Flash Player (nous verrons plus tard comment 
creer une application RDA avec AIR). 

Pour I'instant, nous n'emploirons pas de technologie serveur. Laissez 
done le parametre Applications server type sur None et cliquez sur le 
bouton Next pour poursuivre (figure 4-1). 



New Flex Project 



Create a Flex project. 

choose a name and location for your projectj and configure iihe server iiechnology your projeci: will be using. 



tQ 



Projeci: name; MediaFooi:_chap4| 



Projeci: local:ion 

Use def aull: local:ion 



I Folder; E;\chapil:re_4\^lsdiaFool:_chap4 



Application type 

® ^ Web application (runs in Flash Player) 
O 1^ Desktop application (runs in Adobe AIR) 



5erver technology 



Application server type; None 



a 



Use remote object access service 
' , LiveCycle Data Services 
' ■ ColdFusion Flash Remoting 



L'ecran suivant affiche Templacement du repertoire bin-debug. Ce dos- 
sier integrera le contenu de votre application, compilee avec Flex. Ne 
modifiez pas son emplacement et cliquez sur le bouton Next. 

Le dernier ecran presente le nom du repertoire source (Main source folder) 
de votre projet. Par defaut, ce dossier porte le nom de src. II contiendra 
tous les fichiers sources MXML et ActionScript que vous aurez crees et 
ajoutes a votre projet. Laissez tous les parametres de cet ecran par defaut 
et cliquez sur le bouton finish pour terminer la creation du projet. 

Structure du projet MediaFoot 

L'arborescence du projet, ainsi generee par I'assistant de creation, est 
visible dans la vue flex Navigator. Plusieurs fichiers et repertoires ont ete 
automatiquement generes. 



Figure 4-1 

Premiere etape de creation du projet 



ASTUCE Import/export du projet 

Une option de Flex Builder permet d'exporter et 
d'importer facilement I'integralite d'un projet Flex 
(tout du moins la partie front-end, bien evidem- 
ment). Cette option est tres utile pour partager vos 
projets avec d'autres developpeurs sous la forme 
d'archives au format .zip. 
Selectionnez File>Export>Flex Project 
Archive... Vous pourrez ensuite sauvegarder a 
I'emplacement de votre choix le fichier d'archive de 
votre projet. Ce meme projet pourra aisement etre 
importe par un autre developpeur, simplement en 
selectionnant I'option File>lmport>Flex Pro- 
ject... et en choisissant le fichier d'archive au 
format ZIP. Nous avons ainsi sauvegarde les diffe- 
rentes etapes de developpement de notre etude de 
cas, chapitre par chapitre. 
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Tableau 4-1 Structure du projet 



Nom de f ichier ou de repertoire 


Contenu V 


Medi aFoot_chap4 . mxml 


L'icone de ce fichier est accompagnee de deux symboles, une fleche verte et une bille bleue. La fle- 
che verte indique que le fichier est une application IVIXIVIL. La bille bleue indique que ce fichier est 
la source de I'application par defaut pour ce projet. 


/bin-debug 


Dossier de sauvegarde des fichiers compiles aux formats SWF, HTML, JavaScript et CSS. 


/html -tempi ate 


Fichiers additionnels utilises par certaines fonctionnalites de Flex (detection du lecteur Flash, par 
exemple). 


/.settings 


Ce dossier integre certains fichiers de configuration du projet. 


/libs 


Emplacement optionnel (repertoire) ou peuvent etre stockees vos classes personnalisees. 


/src 


Dossier contenant les fichiers sources de votre application aux formats MXML, ActionScript 3.0 et 
CSS. 


. actionScri pt Properties 


Fichiers de configuration additionnels du Flex Builder 


.flexProperties 


.project 





'^ Flex Navigator £3 | " D 




O '^ (^ 1 B ^ ^ 


Figure 4-2 

La vue Flex Navigator affiche 
I'arborescence du projet genere. 


H tg MediaFool:_chap4 
ShS' bin-debug 
\±i"& html-template 

1 & libs 

B-i3 src 

•••••■™ MediaFooi:_chap4.mxml 



Alternative Le langage XUL 



XUL {XML-based User Interface Language) 
est un autre langage de description d'interfaces 
utilisateur, egalement base sur le XML II a ete 
cree pour le developpement du projet Mozilla. II 
peut done etre compare au MXML de Flex. Son 
format est ouvert. 



Alternative Le langage xaml 

XAML {extensible Application Markup Lan- 
guage) est une autre alternative de langage des- 
criptif base sur le XML. II facilite le developpement 
d'interfaces utilisateur pour Windows uniquement 



Le design web evolue avec MXML 

Votre projet est done cree, et vous maitrisez a present correctement les 
fondamentaux de I'environnement de developpement Flex Builder 3. 
Vous etes done pret a concevoir I'mterface utilisateur de I'etude de cas. 

Tout projet Flex commence par I'ecriture d'un fichier de description 
MXML. Ce langage est en quelque sorte similaire au XHTML, dans la 
mesure ou il permet de definir une interface utilisateur en pla9ant des 
composants sur une page sous forme de balises. Cependant, le MXML 
est plus structure et plus complet, ce qui permet de creer plus rapide- 
ment des interfaces plus interactives. En realite, le MXML s'apparente 
plus aux langages XUL ou XAML. 

Notre projet Flex est vide pour I'instant, mais le fichier MXML integre 
les trois lignes d'instructions suivantes : 
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Fichier MediaFoot_chap4.mxml 



<?xml version="l. 0" encoding="utf-8"?> Q 

<mx:App1 1 cat ion xml ns :mx="http://www. adobe.com/2006/mxml " layout= 

</mx:Application> Q 

Chaque application MXML commence et finit avec une balise de type 
<mx: Application> ... </mx:Application> OO- La premiere ligne spe- 
cifie la version XML et le type d'encodage Q. 

La balise <mx:Application> est en realite le noeud racine d'une applica- 
tion Flex. Elle est aussi le conteneur central de I'application. En 
MXML, deux types principaux de composants sont disponibles : 

• les conteneurs (boites, panneaux, fenetres, etc.) ; 

• et les elements de controle (champs texte, listes, datagrtds, tree, etc.). 

La balise <mx: Application> est done le principal conteneur de tous les 
autres composants de votre application, qui comprennent a la fois les 
autres conteneurs (imbriques) et tous les elements de controle. 

Par defaut, Flex definit un conteneur Application qui vous permet 
d'aj outer du contenu a votre application sans definir explicitement un 
autre conteneur. Mais cette fa9on de proceder ne serait pas pertinente dans 
la pratique. II est preferable, en effet, d'inserer un ou plusieurs autres con- 
teneurs avant d'integrer les premiers composants de votre application. 

Le tableau 4-2 presente quelques caracteristiques liees a la balise 
Appl i cati on. Ce type de tableau sera systematiquement presente lorsqu'une 
nouvelle balise MXML sera abordee pendant la creation de notre projet. 

Tableau 4^2 Balise Application 



'absolute"> Q 



^^■ication 


Description 


Paquetage 


mx.core 


Classe 


public class Application 


Heritage 


Application -^ LayoutContainer -^ Container -^ UlComponent -^ 
FlexSprite -^ Sprite -^ DisplayObjectContainer -^ InteractiveObject -^ 
DisplayObject EventDispatcher -^ Object 


Sous-classes 


WindowedApplication 



Chaque composant Flex doit commencer par le prefixe mx suivi du nom 
du composant defini dans le fichier manifest. Cette instruction 
<mx: Application xml ns:mx=http: //www. adobe, com/2006/mxml utilise ce 
que nous appellerons un namespace XML (ou « espace de nommage »). 
La balise utilise done un namespace mx. Vous pouvez identifier un 



COMPARAISON MXIVIL et HTIVIL 



Les balises <mx: Appl i cati on> et 
</mx: Appl i cati on> sont similaires aux 
balises <html > et </html > du langage HTML. 



B.A.BA Encodage XIVIL 

Le type d'encodage d'un fichier XML est variable 
en fonction des pays. Cette option est facultative, 
mais il est preferable de la specifier L'encodage 
UTF-8 est independant du type de plate-forme ou 
de la langue ; il permet done d'assurer une bonne 
compatibilite. 



Attention Nceud racine unique 

Tout document MXML ne peut avoir qu'un seul 
nceud racine. 



ASTUCE Numerotation des lignes de code 

II est souvent tres utile d'afficher les numeros de ligne 
d'un code source, surtout lors d'un travail en equipe. 
Dans Flex Builder, les numeros de ligne s'affichent en 
selectionnant I'option Show Une Numbers (die 
droit dans la vue Editor en mode Source). 



Lesaviez-vous? 
L'utilite du fichier « manifest » 

Dans le repertoire /framework, sous-repertoire 
d'installation de Flex Builder 3, vous trouverez le 
fichier XML mxml -manifest .xml, dit fichier 
« manifest ». Ce fichier liste tous les composants 
utilisables dans le framework Flex, et done le con- 
teneur Application. La propriete id de 
chaque composant est le nom de la balise utili- 
sableenMXML 



I 
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REC0MMANDATI0NW3C Namespaces 

Les namespaces (espaces de nommage) XML 
offrent une methode simple pour qualifier les 
noms des elements et des attributs utilises dans 
des documents XML, en associant ceux-ci avec des 
espaces de nommage designes par des references 
d'URI (identifiant de ressource unique). 



namespace, car le nom de la balise est prefixe par ridentifiant du names- 
pace suivi de « : ». 

La balise Application possede aussi deux attributs dans notre projet. 
Vous pouvez les utiliser pour fixer des valeurs de nceud : 

• xmlns est I'attribut definissant le namespace mx ; 

• layout est I'attribut definissant la maniere dont le contenu de ce 
document sera positionne. L'attribut layout est optionnel. 



Definition d'un namespace (espace de nommage) 

L'integralite du framework Flex a ete ecrite en classes ActionScript. Les 
composants MXML oni ete, eux, enregistres dans des librairies externes 
(fichiers d'extension SWC). Ces fichiers externes contiennent done des 
centaines de classes en ActionScript. 

Pour utiliser une classe de ces librairies avec du MXML, nous employons 
une balise qui sert d'identifiant. En effet, nous avons vu precedemment 
que le fichier manifest fait correspondre une classe ActionScript a un 
identifiant. C'est le nom de la balise MXML utilisee. 
Afin d'assurer I'unicite de la correspondance entre une classe et un iden- 
tifiant. Flex utilise la notion de namespace qui permet de creer un identi- 
fiant de ressource unique (URI). De ce fait, il sera impossible de generer 
un conflit d'identifiant si vous creez une classe avec un nom deja defini 
dans une classe ActionScript du framework Flex. Le namespace s'assure 
de bien differencier les deux classes et, bien qu'elles aient le meme nom. 
Flex pourra ainsi appeler la classe adequate. Ainsi, en utilisant I'attribut 
xmlns, vous indiquez a Flex quel namespace utiliser. 



Ensavoirplus Types d'agencements 

La propriete layout d'un conteneur principal 
peut etre ajustee selon trois valeurs : absol ute, 
hori zontal (affichage des composants enfants 
sur une ligne) ou vertical (afficliage des com- 
posants enfants sur une colonne). 



Agencement du conteneur principal 

Nous avons deja notifie I'instruction layout="absol ute" de la seconde 
ligne d'instruction. Cette propriete s'applique au conteneur principal 
defini par la balise <mx:Application>. Le layout (mise en page) permet 
de specifier la disposition des composants au sein d'un conteneur. La 
valeur "absolute" signifie done ici que tous les composants imbriques 
dans le conteneur principal devront explicitement fournir leurs coordon- 
nees (x,y) pour definir leurs positions. 

Pour notre projet, nous ajusterons parfois la propriete layout sur la 
valeur vertical afin « d'empiler » nos composants et conteneurs enfants 
verticalement, sans devoir explicitement specifier les coordonnees (x,y) 
de ces derniers. 
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Couleur de I'arriere-plan 

Comme en HTML, il est possible de parametrer la couleur d'affichage 
de I'arriere-plan du conteneur principal. II est egalement possible de 
creer un effet degrade en jouant sur deux valeurs de code couleur (valeurs 
HTML). Cet effet est rendu possible en definissant les codes couleurs 
du parametre backgroundCradientColors, a I'interieur meme de la balise 
<mx : Appl i cati on>. 

De plus, il est possible d'ajuster la transparence de I'arriere-plan, en 
modifiant la valeur de sa couche alpha, via la propriete 
backgroundCradientAl phas, en selectionnant une valeur comprise entre 
0.0 et 1.0. 

Pour notre projet, nous souhaitons definir un degrade du noir (code cou- 
leur HTML : #000000) vers le gris (prenons, par exemple, le code couleur 
#555555) avec une opacite complete (sans transparence) de I'arriere-plan. 

Instruction a inserer dans la balise du conteneur principal 

backgroundCradientAl phas=" [1.0, 1.0]" 
backgroundCradientColors=" [#00000, #555555] " 



Titre de rapplication 

Tout comme en HTML, il est possible de definir le titre de notre applica- 
tion. C'est lui qui s'affichera au sommet du navigateur Internet. La pro- 
priete a utiliser est simplement pageTi tie = « ..::: MediaFoot :::.. ». 



ASTUCE Optimisation 
pour le referencement 



La question du referencement est un point crucial 
pour le developpement des RIA qui n'etaient pas 
facilement referencees par les moteurs de 
recherche principaux comme Google. Sachez 
cependant que I'un des parametres utilises par les 
moteurs de recherche pour le referencement est le 
titre de votre page. II est done important de tou- 
jours definir ce titre avec un contenu pertinent, par 
exemple en integrant les mots-cles que Ton sou- 
haite referencer 



En-tete de rapplication 

L'en-tete {header, en anglais) de I'application est un element indispen- 
sable pour lui donner une identite visuelle. 

L'insertion d'une image est excessivement simple en MXML. II suffit 
d'utiliser la balise <mx: Image> definie dans le fichier XML manifest, puis 
de definir la source de I'image (le chemin d'acces relatif a cette image). 
Voici I'instruction que nous utiliserons a cet effet : 

<mx:Image source="assets/ui/header . jpg"/> 

L'element de controle Image permet d'importer des fichiers aux formats 
JPEG, PNG, GIF et SWF pendant I'execution. Vous pouvez aussi 
ajouter des fichiers au meme format pendant la session de compilation, 
en utilisant I'instruction ©Embed (sou rce=' nom de fichier'). 

Le chemin d'acces a I'image header.jpg est done defini par un repertoire 
que nous appellerons /assets et son sous-repertoire que nous appelle- 



"Sa Flex Navigator V^ 
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0= c^ (^ 1 B 
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H-& bin-debug 






H-& html-template 






& libs 






H-® src 






H-& assets 








B-& ui 






„ ^ ©IBB 


m 




■■■^ MediaFoot. mxml 



Figure 4-3 

La vue Flex Navigator deployee 
avec I'image header 
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rons /ui (pour enregistrer tous les elements graphiques relatifs a I'lnter- 
face utilisateur). 

Tableau 4^3 Balise Image 



Image 


Description ■ 


Paquetage 


mx. controls 


Classe 


public class Image 


Heritage 


Image ^ SWFLoader ^ UlComponent ^ FlexSprite ^ Sprite ^ 
DisplayObjectContainer ^ InteractiveObject ^ DisplayObject ^ Event- 
Dispatcher ^Object 


Implemente 


IDataRenderer, IDroplnListltemRenderer, IListltemRenderer 



En SAVOR PLUS Repertoire d'execution 

Vous pouvez d'ores et deja remarquer le contenu 
de I'adresse URL affichee dans votre navigateur 
Elle indique que votre application est bien exe- 
cutee en local dans le workspace que vous avez 
defini par defaut et dans le repertoire /bin- 
debug utilise pour sauvegarder tout le contenu 
du projet Flex compile et a deployer 



Pied de page 

Par convention, le pied de page {bottom) d'une interface web integre 
generalement une mention de type copyright. Cet element peut aise- 
ment etre ajoute en MXML, grace a I'emploi d'un composant de balise 
<mx: Label > en ajustant le contenu texte de ce dernier ainsi que sa cou- 
leur, par exemple : 

<mx: Label text="Copyn'ght 6 2009 MediaFoot. Tous droits 
reserves." color="#cccccc"/> 

L'element de controle Label affiche une simple ligne de texte non edi- 
table. Si vous souhaitez afficher plusieurs lignes de texte, utilisez a la 
place l'element de controle Text. 

Tableau 4-4 Balise Label 



Label 


Description 


Paquetage 


mx. controls 


Classe 


public class Label 


Heritage 


Label -^ UlComponent -^ FlexSprite -^ Sprite -^ DisplayObjectContainer 
-^ InteractiveObject^ DisplayObjectEventDispatcher ^Object 


Implemente 


IDataRenderer, IDroplnListltemRenderer, IListltemRenderer, IFontContext- 
Component 


Sous-classes 


Form Item Label, SliderLabel, Text 



Premiere compilation 

II est des a present possible de visualiser I'agencement de notre applica- 
tion. Vous pouvez ainsi, par exemple, vous servir du bouton Run de la 
barre d'outils ou bien utiliser le raccourci clavier Ctrl+FTT. 
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Navigate Search Project Data 



Window Help 




Figure 4-4 

La compilation du projet en cours est accessible via le bouton Run de la barre 
d'outils, ou bien I'option Run MediaFoot dans le menu Run, ou encore via le 
raccourci clavier Ctrl+F1 1 . 



En lan9ant la compilation, vos codes sources modifies sont systemati- 
quement sauvegardes et votre navigateur par defaut s'ouvre avec le con- 
tenu de I'application Flex, integre dans une page HTML generee 
automatiquement. 



: MediaFoot :::.. - Mozilla Firefox 



Fichier Edition Affichage Historique Marque-pages Outils 



O 



1^ I u file;///E;/chapitre_4/MediaFoot/bin-debug/MediaFoot.html 



^1 [Gl^kooqle 




Figure 4-5 Application Flex ouverte dans Firefox : le fond degrade est visible avec le titre de la page, 
ainsi que les composants integres (image et texte). 
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^assets 

^history 

^AC_OETags.js 

@ MediaFool.html 

T^MediaFoot.swf 

\£\ playerProductlnstall.swf 

Figure 4-6 

Contenu du repertoire /bin-debug 



Notre application est pour Tinstant fort peu avancee. Mais en quelques 
lignes d'instructions MXML, nous parvenons a concevoir simplement 
les bases du projet. L'ensemble des lignes de code est affiche ici : 

Fichier MediaFoot_chap4.mxml 

<?xml version="1.0" encodi ng="utf-8"?> 

<mx: Application 

xml ns :mx=http: //www. adobe. com/2006/mxml 

backgroundGradientAlphas=" [1.0, 1.0]" 

backgroundGradientColors=" [#00000, #555555]" 

]ayout="vertica] " 

pageTi t]e=" . . : : : MediaFoot :::.."> 

< ! — header--> 

<mx: Image source="assets/ui/header. jpg"/> 

< ! — bottom--> 

<mx: Label text="Copyright 6 2009 MediaFoot. 
Tous droits reserves." co]or="#cccccc"/> 

</mx : App] i cati on> 

Observons a present le contenu du repertoire /bin-debug qui rassemble 
l'ensemble des fichiers compiles et generes par Flex pour notre applica- 
tion. Nous trouverons deux repertoires et quatre fichiers. 

Interessons-nous plus particulierement aux fichiers MediaFoot.htm] et 
MediaFoot. swf. Ces deux fichiers ont ete generes automatiquement par 
Flex Builder suivant un processus transparent pour le developpeur. 

Ouvrons par exemple le fichier MediaFoot.htm]. Le code source produit 
consiste en du HTML classique : 

Fichier |VlediaFoot.html 

<!-- saved from ur]=(0014)about :i nternet — > 
<htm] ]ang="en"> 



Smart developers always View Source. 

This application was built using Adobe Flex, an Open Source 
framework for building rich Internet applications that get 
delivered via the Flash Player or to desktops via Adobe AIR. 

Learn more about Flex at http://flex.org 

// --> 

<head> 

<meta http-equi v="Content-Type" content="text/html ; 
charset=utf-8" /> 
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'I - 



BEGIN Browser History required section 



<link rel="stylesheet" type="text/css" href="history/history.css" /> 
<!-- END Browser History required section --> 

<title>..::: MediaFoot : : : . .</title> 

<script src="AC_OETags.js" language="javascript"></script> 

<!-- BEGIN Browser History required section --> 

<script src= "hi story/hi story. js" language="javascript"></script> 



'I - 



END Browser History required section 



<style> 

body { margin: Opx; overflow: hidden } 

</style> 

<script language=" JavaScript" type="text/javascript"> 

<!-- 

// 

// Clobals 

// Major version of Flash required 

var requiredMajorVersion = 9; 

// Minor version of Flash required 

var requiredMinorVersion = 0; 

// Minor version of Flash required 

var requiredRevision = 28; 

// 

// --> 

</script> 

</head> 



<body scroll="no"> 

<script language="]avaScript" type="text/javascript"> 

<!-- 

// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65) 

var hasProductlnstall = DetectFlashVer(6, 0, 65); 

// Version check based upon the values defined in globals 

var hasRequestedVersion = DetectFlashVer(requi redMajorVersion, requiredMinorVersion, requiredRevision); 

if ( hasProductlnstall && ! hasRequestedVersion ) { 
// DO NOT MODIFY THE FOLLOWING FOUR LINES 

// Location visited after installation is complete if installation is required 
var MMPlayerType = (isIE == true) ? "ActiveX" : "Plugin"; 
var MMredi rectURL = window. location; 

document. title = document. title. slice(0, 47) + " - Flash Player Installation"; 

var MMdoctitle = document. title; 

AC_FL_RunContent( 

"src" , "playerProductlnstall ", 

"FlashVars" , "MMredi rectURL="+MMredi rectURL+'&MMplayerType=' +MMPlayerType+'&MMdoctitle=' +MMdoctitle+ 

"width", "100%", 

"height", "100%", 

"align", "middle", 

"id", "MediaFoot", 

"quality", "high". 
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bgcolor", "#869ca7", 

name", "MediaFoot", 

al lowScri ptAccess" , "sameDomai n" , 

type" , "application/x-shockwave-f lash" , 

pi ugi nspage" , "http: //www. adobe. com/go/getfl ash player" 



); 



} else if (hasRequestedVersion) { 

// if we've detected an acceptable version 

// embed the Flash Content SWF when all tests are passed 

AC_FL_RunContent( 

"src", "MediaFoot", 

"width", "100%", 

"height", "100%", 

"align", "middle", 

"id", "MediaFoot", 

"quality", "high", 

"bgcolor", "#869ca7", 

"name", "MediaFoot", 

"al lowScri ptAccess" , " sameDomai n" , 

"type" , "application/x-shockwave-f lash" , 

"pi ugi nspage" , "http: //www. adobe. com/go/getfl ashplayer" 

); 

} else { // flash is too old or we can't detect the pi ugi n 

van alternateContent = 'Alternate HTML content should be placed here. ' 
+ 'This content requires the Adobe Flash Player. ' 
+ ' <a href=http://www. adobe. com/go/getflash/>Cet Flash</a>'; 
document .wri te(alternateContent) ; // insert non-flash content 
} 
// --> 
</scri pt> 
<noscri pt> 

<object classid="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000" 
id="MediaFoot" width="100%" height="100%" 

codebase="http://fpdown load. macromedia. com/get/f lash pi aye r/current/swf lash .cab"> 
<parani name="movie" val ue="MediaFoot . swf" /> 
<param name="quality" value="high" /> 
<param name="bgcolor" value="#869ca7" /> 
<param name="allowScri ptAccess" val ue=" sameDomai n" /> 
<embed src="MediaFoot .swf" quality="high" bgcolor="#869ca7" 
width="100%" height="100%" name="MediaFoot" align="middle" 
play="true" 
loop="fal se" 
quality="high" 

al lowScri ptAccess=" sameDomai n" 
type=" application/x-shockwave-f lash" 
pi ugi nspage=" http: //www. adobe.com/go/getflashplayer"> 
</embed> 
</object> 
</noscript> 
</body> 
</html> 
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Passons rapidement sur le contenu de ce code source, sans nous attarder 
dessus trop longuement, pour I'instant. Les developpeurs Flash recon- 
naitront aisement le format d'un fichier HTML publie automatique- 
ment avec I'environnement auteur Flash. La ligne d'instruction numero 
105 definit le nom de fichier MediaFoot. swf, ce qui indique que ce 
fichier sera directement integre dans la page HTML au format Flash. 

A priori, il n'y a aucune trace de notre fichier MXML MediaFoot .mxml . 
Le contenu deploye sur le serveur web n'integre done pas de fichier au 
format MXML, contrairement aux fichiers XHTML mis en ceuvre dans 
le cadre d'une application RIA avec Ajax par exemple. 

Mais qu'est done devenu notre fichier MXML ? En realite, lors de la 
compilation. Flex Builder transforme les differentes balises MXML en 
classes ActionScript 3.0. Ensuite, le compilateur genere du code qui ins- 
tancie toutes les classes pour, a la fin, compiler le tout dans le fichier 
MediaFoot. swf. 

Le code MXML est un langage de script qui « assiste » le developpeur 
dans la creation de classes ActionScript. En realite, le code MXML pour- 
rait ne pas exister, et le developpeur pourrait decrire toute I'interface utUi- 
sateur de son application Flex en classes ActionScript directement. Mais 
le processus serait terriblement long et fastidieux pour le developpeur, d'ou 
I'utilite de coder simplement I'interface avec un systeme de balises, pour 
ensuite laisser le compilateur generer lui-meme les classes a compiler. 



ASTUCE Lire le fichier SWF 



Le fichier Medi aFoot . swf contient done I'inte- 
gralite du projet (excepte les ressources externes, 
telles que le header au format . jpeg). Vous 
pouvez d'ailleurs ouvrir directement ce fichier en 
double-cliquant dessus, ce qui executera le lecteur 
Flash et affichera le contenu du projet. 



Le SAVIEZ-VOUS ? Compilation en ligne de commande 

Pour les developpeurs qui ne desireraient pas utiliser Flex Builder pour compiler du MXML en 
SWF le SDK Open Source fourni par Adobe permet de compiler directement, via une ligne de 
commande, un fichier MXML. Pour ce faire, il suffit de localiser le compilateur du SDK qui 
porte le nom de fichier mxml c . exe, generalement enregistre dans le repertoire 
\Adobe\Flex Builder 3\sdks\3 . 0. 0\bin. La ligne de commande a executer 
ensuite est la suivante : 

mxmlc --show-actionscript-warnings=true --strict=true -files-specs 
"e:/chapitre_4/MediaFoot/Medi aFoot. mxml " 



Completion et aide a I'ecriture de code MXML 

Avant de poursuivre sur le developpement de notre interface RIA, arre- 
tons-nous un instant sur les differentes aides a I'ecriture de code 
MXML. Tout au long de la conception de votre application, vous utili- 
serez tres certainement les differentes assistances offertes par Flex 
Builder pour ecrire votre code. Passons-les en revue tres rapidement 
avant de poursuivre plus avant I'ecriture du code proprement dite. 
1 Retournons done a la vue Editor, mode Source, de notre projet. 
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ASTUCE 
Declencher manuellement la completion 

Pour forcer I'affichage de I'assistant de comple- 
tion, pressez simultanement sur les touches 
Ctrl+Espace. 



Figure 4-7 

Completion automatique dans Flex Builder 



2 En ecrivant le debut d'une balise avec le prefixe <mx:, des le premier 
caractere Flex Builder affiche une liste deroulante avec toutes les 
balises standards definies dans le fichier manifest. C'est le systeme de 
completion que nous avons introduit plus en amont de ce chapitre. 

3 Le systeme de completion filtre les resultats en fonction des carac- 
teres saisis apres le prefixe <mx:. Par exemple, si vous entrez la lettre 
« 1 » apres le prefixe, la liste deroulante n' affiche plus que 17 resultats 
(de Label k letterSpactng) . 

4 Selectionnez le premier composant Label pour poursuivre avec 
I'assistant de completion, en pressant la touche Entree ou en double- 
cliquant directement sur le nom du composant affiche dans la liste 
deroulante. 

<nix : Latoel 



o accessibilityProperties 

f activate 

f add 

f added 

^ addedEffect 

? addedToStage 

o alpha 

o automationDelegate 

o automationName 
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5 Apres avoir selectionne le nom du composant, inserez un espace et la 
liste deroulante proposera une nouvelle liste de proprietes, de 
methodes, d'evenements et autres arguments lies au composant Label . 

Savoir utiliser la vue Help de Flex 

Flex Builder fournit egalement un acces direct au langage de reference 
Flex {Flex Language Reference) . 

Selectionnez I'option Help a partir du menu : W\r)dow>Other Views>Help. 
Cette option affichera une nouvelle vue dans le Workbench de Flex. 

Lorsque vous cliquez sur le nom d'une balise dans la fenetre Editor en 
mode Source, la vue Help affiche dynamiquement la reference Flex API 
du composant selectionne. Par exemple, si vous cliquez sur la balise 
<mx: Label >, la fenetre Help affichera un lien vers des informations plus 
detaillees sur I'API du composant (figure 4-9). 

Vous pourrez alors lire des informations detaillees a propos des pro- 
prietes, des evenements, des styles, etc. concernant le composant selec- 
tionne. Cette aide d'acces au langage de reference est tres utile, surtout si 
vous debutez avec Flex, et nous vous conseillons fortement de ne pas la 
negliger. 



50 



fehelp S3 <P 0^=0 


Ki Related Topics 




' -^ About MXML Editor 1 


Creating project resources 


5eealso; 


1 Setting MXML Code Assist prel^erences 


' -^ Dynamic Help 1 


Search results; 


1 About code editing in Flex Builder 


1 About the workbench 


[1 Navigating and organizing code 


1 About ActionScript projects 


1 About markers 


1 About Flex Builder perspectives 


1 Using the profiler 


.^More results... 


Go To; 


% All Topics ^ Search C| Bookmarks 


S Index 



Figure 4-8 

Vue Help de Flex Builder 



'T FlcK API Reference 

No description was proviideid for this user 

interface element. 

Relevant APIs 

ll Label (mx. controls. Label) 



^ Dynamic Help I 

Search results; 

ll Label Decorations 

ll Label decorations 

ll Displaying Data and Labels 

ll Defining native menus declaratively 

ll CVS Labels Decorations 

ll Improving performance when resizing 
Panel containers 

ll Accessing information about the current 
URL 

ll Rotating chart axis labels 
^ More results... 

Figure 4-9 

Afflchage API dans la fenetre Help 
pour le composant Label 



Creation des modules du projet 

Retournons a present au code source MXML pour avancer dans la con- 
ception de I'interface de notre projet. Presentement, nous avons une 
seule « page » MXML (MediaFoot.mxml). Elle constitue le noeud parent 
de notre application et integre son conteneur principal. Cependant, avec 
I'aspect modulaire de notre projet defini avec la figure ci-apres, il est 
impensable de coder I'ensemble des 8 ou 9 modules dans un fichier 
MXML unique. D'une maniere generale, aucun developpeur n'aime tra- 
vailler sur un seul fichier monolithique. Plus vraisemblablement, pour 
travailler proprement, il faut d'ores et deja reflechir a segmenter de fa9on 
structuree notre application en plusieurs fichiers MXML independants. 

A priori, il serait interessant de creer une page MXML par module. 
C'est une alternative interessante, car la plupart des modules sont inde- 
pendants les uns des autres. 

N'oubliez pas qu'une application Flex ne peut contenir qu'une seule 
balise MXML de type Application, avec un conteneur principal, inte- 
grant en son sein tous les autres composants de I'application. Mais afin 
d'integrer de nouvelles « pages » MXML, il est possible de creer et 
d'integrer un composant MXML personnalisable dans un fichier separe. 



QUALITE Modularite du code 

D'un point de vue developpement, segmenter le 
code permet egalement a une equipe de plusieurs 
developpeurs de travailler sur la meme application 
simultanement, ce qui facilite egalement la main- 
tenance du code. De plus, on optimise de ce fait la 
modularite et I'aspect reutilisable du code. 



Attention 

Composants Flex personnalisables 

Nous abordons dans ce chapitre I'un des aspects 
les plus interessants de la programmation 
MXML : la personnalisation de composants reu- 
tilisables. 
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Figure 4^10 

Creation du premier composant 
personnalisable Home.mxml 



Creer des composants personnalisables 

Nous pouvons done creer I'ensemble de nos modules via des composants 
personnalisables au format MXML, dans des fichiers independants. 

Tout comme le fichier MediaFoot.mxml integre le conteneur principal, 
chaque composant personnalisable commence avec une declaration du 
type d'encodage du fichier XML. Mais nous n'utiliserons bien entendu 
pas labalise Application qui est reservee au conteneur principal, et done 
au fichier parent MediaFoot.mxml. 

En partant du principe que nous devons creer quatre modules en plus de 
la page d'accueil, il nous faudra creer cinq composants. En voici la liste : 

• module 1 : Home, page d'accueil, composant Home.mxml ; 

• module 2 : Edito, composant Edito.mxml ; 

• module 3 : Photo galerie, composant Plioto.mxml ; 

• module 4 :joueurs, composant 3 oueurs.mxml ; 

• module 5 : Match Live, composant Match_l i ve . mxml . 

Pour creer un composant MXML personnalisable, selectionnez 
File>New>MXML Component. Creez un repertoire que vous pouvez 
nommer par exemple /views et dans lequel vous sauvegarderez tous les 
cinq modules sous forme de composants. Le premier portera le nom de 
Home.mxml et il sera base sur un conteneur de type Canvas (nous verrons 
dans le chapitre suivant les proprietes de ce type de conteneur) 
(figure 4-10). Nous n'ajusterons pas pour I'instant la largeur ni la hau- 
teur de ce composant afin de nous assurer qu'il s'etendra sur toute la sur- 
face du conteneur principal, afin de couvrir I'integralite de son contenu. 



F> New MXML Component 



New MXML camponent 

Create a new MXML component. 



k@® 



Enter or select the parent folder: 



MediaFoot/src/views 



Q ^ MediaFoot 
El l3src 

© & assets 
■■■■& views 



! 



Filename; Home 



Based on: | Canvas 
Width; I 



Height; 
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Le composant ainsi genere s'affiche dans la vue Editor. Son code source 
est le suivant : 

<?xml version="l. 0" encoding="utf-8"?> Q 

<mx: Canvas xml ns :mx="http://www. adobe.com/2006/iTixml "> 

</mx:Canvas> Q 

Comme nous I'avons note auparavant, la premiere ligne d'instruction 
concerne le type d'encodage du fichier MXML Q. Ensuite, le code 
decrit la balise <mx:Canvas> elle-meme definie dans le fichier manifest Q. 

Pour I'instant, nous ajouterons trois proprietes a ce conteneur : 

• largeur ajustee a 100% ; 

• longueur ajustee a 100% egalement ; 

• couche alpha en transparence totale. 

Le code source du composant Home.mxml devient done : 

<?xml version="l. 0" encoding="utf-8"?> 

<mx: Canvas xml ns :mx="http://www. adobe.com/2006/mxml " 

width="100%" 

height="100%" 

backgroundAl pha="0"> 
</mx:Canvas> 

Nous procedons de la meme fa9on pour les autres composants, du module 
n° 1 au module n° 5, afin de generer les cinq autres fichiers, toujours dans 
le repertoire /views prevu a cet effet. L'arborescence ainsi generee dans la 
vue flex Navigator sera done celle illustree par la figure 4-11. 



■^ Flex Navigator S3 | ° □ | 




^¥ B ^ ^ 


B tg MediaFoot 


H-& bin-debug 


H &• html-template 


&libs 


B ^src 


a & assets 


B & views 






Boutique, mxml 






Calendrier.mxml 






Edito.mxml 






Filjnfos.mxml 






Home.mxml 






Matchjive.mxml 






■■■■' Photo. mxml 






■■■■' Sondage.mxml 






■■■■' Statistiques.mxml 


la 


1 MediaFoot. mxml 



Figure 4-11 

Les composants sont ainsi crees 
dans le repertoire /views. 
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AnENTION Point de syntaxe 

Nous utilisons la syntaxe . * afin de definir 
Tensemble des composants disponibles dans le 
repertoire /views. 



Attention Identifiant de composant 

Afin de pouvoir referencer plus tard ce compo- 
sant en ActionScript, il est indispensable de 
fournir un identifiant dans I'attribut id. 



Une fois les composants enregistres, il est necessaire de creer un namespace 
XML pour acceder aux composants a partir de I'application principale. 
Nous devons inserer ce namespace dans la balise MXML Application. 

A cet effet, nous ajoutons done la propriete xmlns avec, comme names- 
pace, un nom choisi arbitrairement (vi ews) et comme valeur le mot 
views egalement, car c'est le nom du repertoire que nous avons cree pour 
stocker tous nos composants MXML personnalises : 

xml ns :views=" views . *" 

Nous souhaitons a present integrer la page d'accueil dans le conteneur 
principal. Ceci peut se faire tres simplement en ecrivant instruction sui- 
vante dans le fichier MediaFoot .mxml : 

<views:Home id="home" width="100%" height="100%" label="Home"/> 

Nous utilisons done une balise commen9ant par views, car c'est le nom 
de namespace que nous avons choisi pour nos composants personnalises. 
Nous selectionnons ensuite le composant que nous souhaitons afficher 
(le composant Home pour la page d'accueil), avec un identifiant 
id="home". Concernant les dimensions, nous ajustons la largeur et la 
hauteur a 100 % afin d'occuper I'ensemble du conteneur principal. 

Revenez a present sur le fichier Home. mxml et ajoutez la ligne d'instruc- 
tion suivante : 

<?xml version="1.0" encodi ng="utf-8"?> 

<mx: Canvas xmlns :mx="http: //www. adobe. com/2006/mxml " 

width="100%" 

height="100%" 

backgroundAlpha="0"> 

<mx: Label text="Home"/> Q 

</mx: Canvas> 

La nouvelle balise Label permet tout simplement de rajouter du texte Q, ici 
le mot « Home ». II s'affichera simplement dans le composant Home . mxml . 

Compilez a present votre application et observez le resultat. On voit tou- 
jours le fond degrade, ainsi que les composants integres (image et texte) 
dans le conteneur principal. Le mot « Home » est egalement visible entre 
I'en-tete et le pied de page definis dans le conteneur principal. 

Vous venez ainsi de construire votre premier composant personnalisable 
avec Flex. Bien que son contenu se limite a I'affichage simple du mot 
« Home », la procedure de base sera toujours la meme. Suivez-la de nou- 
veau pour les quatre autres composants (modules 2 a 5). 
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Pour finir, revenez sur le conteneur principal MediaFoot .mxml et ajoutez 
les instructions d'integration des cinq composants precedemment 
definis : 

<views:Edito id="edito" width="100%" height="100%" label ="Edito"/> 

<views:Fil_infos id="fil_infos" width="100%" height="100%" label="Fil infos"/> 
<views:Photo id="photo" width="100%" height="100%" label="Photo Galerie"/> 
<views:Joueurs id="joueurs" width="100%" height="100%" label ="Joueurs"/> 
<views:Match_live id="match_l ive" width="100%" height="100%" label="Match Live"/> 

<views : Boutique id="boutique" width="100%" height="100%" label="Boutique"/> 
<views : Calendn'er id="calendn'er" width="100%" height="100%" label = "Calendn'er"/> 
<views : Stati stiques id="stati stiques" width="100%" height="100%" label="Stati stiques"/> 

La structure de notre etude de cas (son squelette, pour etre precis) est 
ainsi creee avec un conteneur principal et neuf composants a personna- 
liser. Mais bien qu'integres au conteneur principal, ces composants ne 
sont pas correctement accessibles. Si vous compilez votre projet, vous 
verrez les differents composants empiles verticalement. L'acces a ces 
composants doit done se faire a I'aide d'un outil de navigation approprie, 
element de controle facile a mettre en place grace a Flex et ses nombreux 
composants de navigation adaptes. 



Integrer un conteneur de navigation 

Nous avons vu que les conteneurs d'agencement {layout) sont utilises 
pour controler le dimensionnement et la position d'elements destines a 
I'affichage (par exemple, des conteneurs ou des elements de controle). 

Nous allons ici introduire le concept de conteneur de navigation, qui est 
utilise pour gerer I'accessibilite des utilisateurs au contenu. Les conte- 
neurs de navigation ne peuvent comprendre que des conteneurs d'agen- 
cement (et eventuellement d'autres conteneurs de navigation). On ne 
peut y trouver aucun autre type de composant. 

La figure 4-12 affiche les differents conteneurs de navigation disponibles 
avec Flex 3. Cette vue est accessible en mode Design, vue Components. 

Pour notre projet, nous utiliserons le conteneur de navigation ViewStack 
qui peut directement inclure d'autres conteneurs. Nous nous servirons 
egalement du conteneur de navigation LinkBar qui lui, en revanche, ne 
peut pas comporter d'autre conteneur. II peut simplement se lier a un 
Vi ewStack et controler I'affichage de ses elements. 

Tableau 4-5 Balise ViewStack 



ViewStack 


Description 


Paquetage 


mx.containers 


Classe 


public class ViewStack 



:: Outline [^Compo.. 



H-iS' Custom 

[±|-& Controls 

H-& Layout 

H-& Navigators 

|c=j Accordion 

'90 ButtonBar 

■HHl LinkBar 

'flUi NenuBar 

■WBi TabBar 

[^ TabNavigator 

IS ToggleButtonBar 

H- & Charts 



Figure 4-12 Les conteneurs de navigation 

de Flex 3 sont visibles dans la vue 

Components en mode Design 
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Tableau 4-5 Balise ViewStack (suite) 



ViewStack 


Description J 


Heritage 


WiewStack ^ Container ^ UlComponent ^ FlexSprite ^ Sprite ^ 
DisplayObjectContainer ^ InteractiveObject -> DisplayObject ^ 
EventDispatclner ^ Object 


Implemente 


IHistorylVlanagerClient 


Sous-classes 


TabNavigator 



Tableau 4-6 Balise Linl<Bar 



LinkBar 


Description 


Paquetage 


mx. controls 


Classe 


public class LinkBar 


Heritage 


LinkBar ^ NavBar ^ Box ^ Container ^ UlComponent ^ 
FlexSprite ^ Sprite ^ DisplayObjectContainer ^ InteractiveObject ^ 
DisplayObject ^ EventDispatcher ^ Object 



Attention L'habit ne fait pas le moine ! 

Leconteneur ApplicationControl Bar et 
I'element de controle MenuBar sent references 
parfois en tant que conteneurs de navigation, 
mais ils n'en sent pas. Application- 
Control Bar est un conteneur de layout et 
MenuBar est un controle, pas un conteneur 
Cependant, ces deux elements peuvent souvent 
etre utilises comme elements de navigation. 



Pour resumer, voici la liste des conteneurs de navigation susceptibles 
d'avoir d'autres conteneurs enfants : 

• ViewStack ; 

• TabNavigator ; 

• Accordion. 

Et voici la liste des conteneurs de navigation utilisables dans un 
ViewStack : 

• ButtonBar ; 

• LinkBar ; 

• TabBar ; 

• ToggleButtonBar. 

Le conteneur de navigation ViewStack ne presente pas lui-meme d'ele- 
ments visibles. II integre plutot une liste de conteneurs enfants empiles. 
Le conteneur enfant visible par defaut est le premier conteneur defini 
dans cette liste. 

Les autres conteneurs integres peuvent etre visibles a leur tour, mais seu- 
lement un par un. Le conteneur ViewStack ne possede aucune interface 
utilisateur pour permettre la navigation entre ses differents conteneurs 
enfants. II faut done le lier a un autre conteneur de navigation specifi- 
quement cree pour cela. 
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Pour notre etude de cas, nous utiliserons le conteneur Vi ewStack avec un 
LinkBar. Le jeu d'instructions MXML declare a cet effet peut done etre 
le suivant : 

<mx: LinkBar dataProvider="MediaFootContent" color="#FFFFFF" rollOverColor="#FFFFFF" 

selectionColor="#BDE9FA"/> O 

<mx:ViewStack id="MediaFootContent" resizeToContent="true"> Q 
<views:Home id="home" width="100%" height="100%" label ="Home"/> 
<views:Edito id="edito" width="100%" height="100%" label ="Edito"/> 
<views:Fil_infos id="fi l_infos" width="100%" height="100%" label="Fil infos"/> 
<views:Photo id="photo" width="100%" height="100%" label="Photo Galerie"/> 
<views:Joueurs id="joueurs" width="100%" height="100%" label ="Joueurs"/> 
<views:Match_live id="match_l ive" width="100%" height="100%" label="Match Live"/> 
<views: Boutique id="boutique" width="100%" height="100%" label="Boutique"/> 
<views: Calendrier id="calendrier" width="100%" height="100%" label="Calendrier"/> 
<views: Stati stiques id="statistiques" width="100%" height="100%" label="Stati stiques"/> 

</mx : Vi ewStack> 

Nous introduisons done iei une balise de type <mx:LinkBar> avee, 
eomme parametre dataProvider, le nom MediaFootContent Q. On 
retrouve ee nom dans I'identifiant i d de I'instruetion suivante Q, qui uti- 
lise une balise de type <mx:ViewStack>. Autrement dit, le LinkBar preee- 
demment defini utilisera la liste des eonteneurs integres dans le 
eonteneur de navigation ViewStack. 

Les eonteneurs integres dans le ViewStack sont nos eomposants person- 
nalises, definis dans le paragraphe precedent. 

La bouele est bouelee. Compilez a present I'applieation et visualisez le 
resultat dans votre navigateur prefere (figure 4-13). 




Figure 4-13 

Le conteneur de navigation donne acces 
aux hull modules du projet ainsi qu'un acces 
a la page d'accueil « Home ». 



En quelques lignes de eode MXML, nous avons defini un eonteneur de 
navigation LinkBar, element simple mais ergonomique et entierement 
personnalisable, donnant aeees a de nombreuses proprietes. Dans notre 
exemple, nous n'avons personnalise que quelques proprietes eomme la 
eouleur du eonteneur (propriete color) et la eouleur de survol (propriete 
rollOverColor), mais il existe de nombreuses autres proprietes ajustables 
(figure 4-14). 
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H Flax Properties E3 l|e|:[0 @ = □ 


H Flex Properties E3 j 1 1 H = □ 


1^^^^^^ IIS" 


□ 


▼ Common 




1 


Value 


1 

i 


|!!!| mx;LinkBar | Category View | 
Property Value ^ 


'(p mxiLinkEar 
. Property 


ID:| 1 


B Data 


1 


backgroundSize 


Data provider; | MediaFootContent | 


dataProvider MediaFootC... 
iconField 


barColor 




blendMode 




Selected index; | | 


labelField 


borderColor 
borderSides 






On click; | | 


labelFunction 




T Style 


toolTipField 


borderSkJn 




IB Effects 


borderStyle 




H Events 


borderThickness 




Style; 1 <Default style> v| ^- 


B Size 1 


buttonMode 


1 Convert to CSS... | 


H Styles 1 




cacheAsEitmap 


backgroundAlpha 




cachePolicy i 


Text 


bactgroundAttacl- 




childAdd 


backgroundColor 




childlndexChange 


A| Vs^dsns ^\\ ia\im\ Bill 
A 1 1 »«= 

Border/Alpha 


backgroundDisable 




i 


childRemove 


backgroundlmage 




clipContent 


backgroundSize 




color 


n #FFFFFF 


barColor 




contextMenu 
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borderColor 




cornerRadius 


borderSides 




creatingContentPane 


^^^H i^^^H 


borderSkin 




creationComplete 


n oM ES\ M 


borderStyle 




creationCompleteEf... 


Fill 


borderThickness 


creationlndex 


color n #FFFFFF 
cornerRadius 


creationPolicy | 


▼ Layout 


currentState 




disabledColor 


currentStateChange 




disabledOverlayAI 




currentStateChanging 




Width; 1 1 Height; | | 


dropShadowColor 




dataChange 




dropShadowEnabI 




dataProvider 


MediaFoot... | 


errorColor 




deactivate 


1 


'""""«"'■""'""" 


J;^^^^^;^^. 





Figure 4-14 Liste de quelques proprietes ajustables du composant LinkBar 

Pour acceder a la liste des proprietes d'un composant, selectionnez son 
mode Design, et visualisez le panneau Flex Properties. Trois affichages 
sont possibles : la vue standard (Standard View), la vue par categorie 
(Category View) et la vue alphabetique (Alphabetical View). Cliquez sur 
I'un des trois boutons disponibles, a droite de I'onglet Flex Properties, 
pour activer I'une de ces trois vues. 

Attention Travailler en mode Design 

Depuis le debut de ce chapitre, nous travaillons uniquement en mode Source sur la vue 
Editor, afin de bien assimiler la syntaxe du langage de description MXML Cependant, I'une 
des qualites de Flex Builder est de fournir un outil de conception WYSIWYG permettant une 
approche differente de conception graphique, autrement dit en construisant une interface uti- 
lisateur sans taper une seule ligne de code. C'est le mode Design. Nous ne deconseillons pas 
cette approche, car le code MXML genere par Flex Builder restera propre et coherent, contrai- 
rement a ce que proposent d'autres logiciels utilisant le meme principe de conception, qui 
peuvent souvent produire un code parfois difficile a comprendre et a maintenir. Seulement, 
nous eviterons de presenter la conception de notre application riche via ce mode, car I'aspect 
pedagogique et qualitatif du procede ne nous semble pas forcement pertinent. 
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En resume 

Petit a petit, le squelette de notre projet se constitue. Les fondations du 
projet se mettent en place. Les modules, sous forme de composants per- 
sonnalises, s'integrent a present dans un conteneur principal unique, ce 
qui evite les desagrements du processus de chargement systematique de 
page lors de la navigation entre les differents modules. 

Nous allons a present approfondir notre connaissance du langage 
MXML en construisant le contenu du premier module « Home », en 
travaillant directement sur le fichier Home.mxml. 
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Home page - conteneur principal 



Concevoir une interface 
utilisateur riche 



La page d'accueil est en quelque sorte la porte d'entree 
de notre application... Une fois construit le squelette 
de notre projet, progressons done dans la conception 
de I'interface utilisateur en realisant la structure complete 
de cette page d'accueil, toujours grace au langage MXML. 
EUe sera mise en forme au moyen des feuilles de style CSS. 



SOMMAIRE 

► Integrer le bandeau 
d'information 

► Integrer les panneaux 
de interface utilisateur 

► IVlettre en forme I'interface 
grace aux styles 

► Integrer les autres panneaux 

MOTS-CLES 

► Canvas 

► HBox 

► VBox 

► CSS 

► TitleWindow 

► Flex 3 Style Explorer 



La page d'accueil de notre etude de cas doit permettre a I'mternaute de 
voir, d'un seul coup d'oeil, I'ensemble des fonctionnalites disponibles. Les 
cinq modules definis dans les specifications de I'etude de cas y seront done 
tous visibles sous la forme de « panneaux » independants (figure 5-1). 



Figure 5-1 

Page d'accueil du projet 




Nous pouvons done definir quatre panneaux : 

• Edito (module n° 2) ; 

• Photo Galerie (module n° 3) ; 

• joueurs (module n° 4) ; 

• Match Live (module n° 5) ; 

A ces panneaux, nous ajouterons un petit bandeau dans lequel pourra 
s'inscrire un message d'information {ticker). Ce bandeau se situant au- 
dessus des autres panneaux, c'est par lui que nous allons commencer 
pour agencer notre interface de page d'accueil. 
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Integrer le bandeau dinformation 

Ce petit espace horizontal devra permettre I'affichage d'informations 
extraites d'un flux RSS ou d'un fichier XML quelconque. Le principe 
est de faire defiler un flux d'informations avec des liens d'acces direct 
vers d'autres ressources exterieures ou internes. Dans ce chapitre, nous 
nous contenterons de definir simplement I'espace reserve a ce bandeau. 

Reprenons le fichier source Home.mxml. Son code source est le suivant : 

Code source du fichier Home.mxml 

<?xml version="l. 0" encoding="utf-8"?> 

<mx: Canvas xml ns :mx="http://www. adobe.com/2006/mxml " 

width="100%" 

height="100%" 

backgroundAl pha="0"> 

<mx:Label text="Fil infos"/> 
</mx:Canvas> 

Le conteneur que nous avons defini est un composant de type 
<mx:Canvas>. Rappelons qu'un conteneur d'agencement de type Canvas 
definit une zone rectangulaire dans laquelle seront integres d'autres 
composants enfants (conteneurs ou elements de controle). Contraire- 
ment aux autres conteneurs, vous ne pouvez pas laisser Flex organiser 
automatiquement la disposition de ces composants enfants. Vous devez 
done specifier la position des composants internes. L'avantage d'utiliser 
ce type de conteneur d'agencement est de disposer d'un tres grand con- 
trole sur I'affichage des composants internes. En effet, le conteneur 
Canvas ne dispose d'aucune information par defaut sur le positionne- 
ment et les dimensions de ses composants enfants. 

Tableau 5-1 Conteneur Canvas 



Canvas 




Paquetage 


mx.containers 


Classe 


public class Canvas 


Heritage 


Canvas ^ Container ^ UlComponent ^ FlexSprite ^ Sprite -> 
DisplayObjectContainer ^ InteractiveObject ^ DisplayObject 
EventDispatcher ^Object 


Implemente 


IConstraintLayout 



En SAVOIR plus Position des composants 
dans un Canvas 

La disposition de type « absolue » (absolute) 
implique que vous specifiez les valeurs des coor- 
donnees (x,y) de chaque composant. Avec la dis- 
position de type « contrainte » (constraint- 
based ), vous devez specifier I'ancrage sur un cote 
ou le centre d'un element de reference. Quoiqu'il 
en soit, dans les deux cas, la disposition des com- 
posants enfants ne peut etre geree automatique- 
ment avec un conteneur de type Canvas. 



Pour ajouter un espace reserve a notre bandeau d'information, nous 
allons done encadrer le texte existant « Home » avec un conteneur 
d'agencement de type HBox. En effet, le conteneur HBox dispose ses 
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enfants sur une seule ligne horizontale, et c'est exactement ce que nous 
souhaitons integrer pour le moment. 

Tableau 5-2 Conteneur HBox 



HBox 


Description 


1 


Paquetage 


mx. containers 


Classe 


public class MBox 


Heritage 


HBox ^ Box -> Container -> UlComponent ^ FlexSprite ^ 
DisplayObjectContainer ^ InteractiveObject ^ DisplayObject 
EventDispatcher ^ Object 


Sprite -> 


Sous-classes 


Gridltem, GridRow 



Modification du code source du ficliier Home.mxml 

<!-- ticker --> 

<mx:HBox width="650" borderStyle="solid" borderColor="#FFFFFF"> 

<mx: Label text="Home"/> 
</mx: HBox> 

Dans le code source du fichier Home.mxml, nous ajoutons done une balise 
<mx:HBox> en donnant a trois de ses proprietes les valeurs indiquees ci- 
dessus. La largeur de ce conteneur HBox est forcee a 650 pixels, car si 
nous la regions a 100 %, cette largeur sera automatiquement ajustee a 
celle de son composant enfant (ici la largeur du texte contenu dans le 
composant Label). Nous integrons done manuellement la largeur de la 
HBox sur toute la largeur de la page d'accueil (650 pixels). 

La seconde propriete que nous ajustons est borderStyle="solid". Elle 
permet de rendre visible le contour de notre conteneur. Pour finir, nous 
regions la couleur du contour sur la valeur HTML du blanc 
(#FFFFFF) : borderColor="#FFFFFF". 

Le contenu du composant Label n'etant pas tres visible, nous remplace- 
rons I'instruction precedente par : 

JVIodification du composant Label 

<mx:Label text="vendredi 2 octobre 2009 - info ticker" 
width="100%" color="#AAAAAA" id="ticker_box" 
textAlign="center"/> 

Ici, nous ajustons la largeur du texte a toute la largeur du conteneur 
parent (width="100%"), nous modifions sa couleur (color="#AAAAAA"), 
nous precisons un identifiant (id="ticker_box") et nous alignons le texte 
au centre du conteneur (textAlign="center"). 

Le resultat final est visible sur la figure 5-2. 
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Figure 5-2 

Integration de {'emplacement 
prevu pour le bandeau 
d'information (ticl<er) 



Integrer les panneaux de Tinterface 
utilisateur 

Nous allons a present concevoir et positionner notre premier panneau. 
L'idee est de creer un conteneur d'agencement de type VBox dans lequel 
nous integrerons un composant TitleWindow. En effet, un TitleWindow 
est un conteneur d'agencement particulier qui integre une barre de titre, 
un sous-titre, une bordure et une zone de contenu pour tous ses compo- 
sants enfants. Nous ajouterons egalement un bouton de fermeture du 
conteneur, que nous rendrons operationnel dans les chapitres suivants. 

Tableau 5-3 Conteneur TitleWindow 



TitleWindow 


Description 


Paquetage 


mx.containers 


Classe 


public class TitleWindow 


Heritage 


TitleWindow -> Panel -> Container ^ UlComponent ^ FlexSprite -> 
Sprite ^ DisplayObjectContainer -> InteractiveObject ^ DisplayObject 
EventDispatcher ^ Object 



Comme indique dans le tableau 5-3, le conteneur Ti tl eWi ndow est derive 
de la classe Panel. C'est done un composant particulier de type Panel . 

Voici les caracteristiques de dimensions par defaut du conteneur 



Ti tleWi ndow : 



Tableau 5-4 Caracteristiques par defaut du conteneur TitleWindow 



Caracteristiques 



Description' 



Dimensions par defaut 



1 . Hauteur : la hauteur est assez importante pour inclure tous les composants enfants dans la zone de contenu, en pre- 
nant en compte les hauteurs respectives des composants enfants integres. II faut egalement ajouter la hauteur de la 
barre de titre, celle de la bordure, eventuellement un espacement entre les composants enfants et, pour finir, le som- 
met et le bas du conteneur. 

2. Largeur : la largeur est celle par defaut ou explicite du composant enfant le plus large. II faut ensuite ajouter celle du 
texte du titre ou bien les bordures gauche et droite de la zone de remplissage du conteneur. 
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Tableau 5-4 Caracteristiques par defaut du conteneur TitleWindow (suite) 



Caracteristiques 


Description J 


Bordures 


1 pixels pour les bordures gauclne et droite. 
2 pixels pour la bordure du sommet. 
pixel pour la bordure du bas. 


Remplissage 


4 pixels pour le sommet, le bas, la gauche et la droite. 



Les instructions MXML que nous definissons pour le panneau Edito 
seront done les suivantes : 



Attention Specifier les coordonnees 

Le conteneur parent de la VBox etant un 
Canvas, il est obligatoire de specifier les coor- 
donnees (x,y). Nous renseignons egalement sa 
largeur et sa hauteur, ainsi que son identifiant. 



Panneau EDITO - fichler Home.mxml 

</mx: HBox> 

<l — edito — > 

<mx:VBox id="vboxEdito" width="478" height="189" y="38" 
x="0"> 

<mx:TitleWi ndow id="wi ndowEdi to" width="100%" 
height="100%" layout="absolute" ti tle="EDITO" 
showCloseButton="true"> 

</mx : Ti tl eWi ndow> 
</iTix:VBox> 

Nous ajustons la largeur et la hauteur du panneau TitleWindow a 100 %, 
afin de faire en sorte que ce composant occupe toute la surface definie 
par le conteneur VBox. Nous specifions une disposition interne de type 
absol ute car nous souhaiterons ulterieurement positionner librement ses 
composants internes. Ensuite, nous definissons le titre du panneau a 
afficher dans la barre de titre, son identifiant et, pour finir, nous choisis- 
sons la propriete showCloseButton="true" afin de permettre, plus tard, la 
fermeture de ce panneau. 

Compilez le tout et observez le resultat (figure 5-3). 



Figure 5-3 

Integration du panneau Edito 
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Le panneau s'integre correctement a remplacement desire. Cependant, 
les valeurs de style appliquees par defaut au panneau ne s'integrent pas 
esthetiquement au design defini pour le reste de I'interface utilisateur. 
Nous pourrions ajuster I'aspect graphique en modifiant directement les 
proprietes internes du panneau ainsi cree, mais nous procederons diffe- 
remment en parametrant une feuille de style CSS, qui integrera un style 
graphique predefini, applicable a tous nos panneaux. 



Mettre en forme Tinterface grace aux styles 

L'objectif est done de definir un style graphique unique pour tous les 
panneaux. A cet effet, il est interessant d'utiliser une feuille de style 
CSS, tout comme le ferait un programmeur HTML. 



Ajouter une feuille de style 

1 Pour ajouter une feuille de style dans notre projet, il suffit de selec- 
tionner le dossier /src dans la vue Flex Navigator — cliquez droit puis 
choisissez New>CSS File (figure 5-4). 



] Flex Navigator ^ 



B^ 



Q-t^ MediaFool:_chap05 
$■■■& bin-debug 
H-& html-template 
i & libs 



ra MediaFooii.mxml ^ Home.mxml ^ 

I [^ Source [Ij] Design 



E-e 



^ 



: Outline ^ 



G Ei f 



Go Iniio 

Open in New Window 



IffiCopy 
^ Paste 
K Delete 
Move, . , 
Rename. . 



1 <?xnnl version="l . 0" enc 
2'T'<r[ix : Canvas xnilns :r[ix="ht 

3 width="100%" 

4 height="100%" 

^ Flex Project 
^ ActionScript Project 
^ Flex Library Project 
^j Project... 



■^B Import.. 
l^ Export.. 



^ Refresh 



Team 

Compare With 

Restore from Local History.. 



^ MXML Application 
fli MXML Component 
qI MXML Module 
^ ActionScript File 
^ ActionScript Class 
1f}| ActionScript Interface 



C5 Folder 
[*File 



[=5 Other.. 



Properties 



Figure 5-4 

Creation d'un fichier CSS pour le projet 



2 Ensuite, donnez un nom a votre fichier CSS (nous le nommons 
MediaFoot .ess). 
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Le SAVIEZ-VOUS ? Integrer des CSS dans le code 

II est egalement possible d'integrer directement du 
style CSS dans le code MXML Pour ce faire, 11 suffit 
d'utiliser les balises <mx : Sty 1 ex/mx : Sty 1 e> 
encadrant les proprietes de styles. 



3 Ouvrez ensuite le fichier MediaFoot .mxml integrant le conteneur prin- 
cipal, et ajoutez I'instruction suivante juste apres la definition de la 
balise <mx: Application> : 

Integration d'une feuille de style externe 

<l— css--> 

<mx:Style source="MediaFoot. ess »/> 

4 Ouvrez ensuite le fichier MediaFoot .ess directement dans la vue 
Editor et ajoutez les parametres suivants : 

Definition du style de nos panneaux 



/* CSS file 'V 

. panneauStyle 

{ 

borderStyle: 

borderThiekness: 

baekgroundColor: 

baekgroundAlpha: 

eolor: 

eornerRadius: 

dropShadowEnabled : 

font-fami ly : 

fontSize: 

fontWeight: 

headerHeight: 

textlndent: 

borderColor: 

el oseButtonDownSki n : 

el oseButtonUpSki n : 



"solid" ; 

1; 

#000000; 

1; 

#BDE9FA; 

0; 

true; 

Arial ; 

11; 

bold; 

24; 

0; 

#FFFFFF; 

Embed ( ' /assets/ui/elose_over. png ' ) ; 

Embed ( ' /assets/ui/elose_up. png ' ) ; 



} 



Le tableau ci-dessous resume les differentes proprietes que nous avons 
definies pour le style de notre composant Panel : 

Tableau 5-5 Style du composant Panel 



Propriete 


Description 1 


borderStyle 


Style de la bordure d'un element. La propriete solid cree 
une bordure continue. 


borderThiekness 


Epaisseur de la bordure d'un element. 


baekgroundColor 


Couleur de fond de I'arriere-plan. 


baekgroundAlpha 


Degre de transparence de I'arriere-plan, de (transparence 
totale) a 1 (opacite totale). 


color 


Couleur detexte. 


eornerRadi us 


Arrondi des coins d'une bordure : avec la valeur 0, le coin 
est un angle droit. 
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Tableau 5-5 Style du composant Panel (suite) 



Propriete 


Description 


dropShadowEnabled 


Ajout (valeur true) ou non (valeur f al se) d'une ombre 
sous I'element. 


font-fami ly 


Police de caracteres. 


fontSize 


Taillede la police. 


fontWeight 


Style de police de caracteres de I'en-tete. 


headerHeight 


Hauteur de I'en-tete. 


textlndent 


Indentation du texte. 


borderColor 


Couleurde la bordure. 


cl oseButtonDownSki n 


Apparence du bouton de fermeture enfonce {Down). 


cl oseButtonUpSki n 


Apparence du bouton de fermeture relache (Up). 



Assistant de creation CSS dans Flex Builder 

Decidement, avec Flex, le developpement RIA devient un veritable 
plaisir. Tout semble pense pour aider le developpeur a concevoir rapide- 
ment et proprement son application cliente. Ainsi, Flex Builder 3 pro- 
pose un mode de visualisation interactif pour la creation de styles en 
CSS. Pour activer cette fonctionnalite, il suffit d'ouvrir un document 
d'extension CSS et de passer en mode Design. 

Ouvrez, par exemple, notre fichier en cours de creation MediaFoot .ess. 
Cliquez ensuite sur le bouton Design et selectionnez un composant dans la 
liste proposee. Choisissezle composant Panel et cliquez sur le bouton OK. 



|w| Source |il| Design | style; | .panneauStyle v| "^ 



Background; 



Preview as; Seiect component., 



>t|0|eL | 



Select Component for Preview 






OLAPDaliaGridHeaderRenderer 


A 

» 




Pholio 

PieCharl: 

PieSeries 

PloliCharl: 

PloliSeries 

PolarCharl: 

PolarDataCanvas 

PopUpEutton 

PopUpEuttonSkJn 






1 OK II Cancel | 1 


1 



Figure 5-5 

Outil de creation CSS 
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AlLER PIUS LOIN 
Modification du style en ActionScript 

II est egalement possible de modifier le style d'un 
composant en utilisant le langage ActionScript. 



Flex Builder vous propose alors une visualisation en temps reel du style 
applique sur un composant Panel (figure 5-6). 



1^ Flex Properties £3 1 
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1 
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1 
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m 
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color 
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cornerRadius 
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dropShadowColor 
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fontAntlAliasType 


fontPamily 


Ariel 




FontGridFltType 






fontSharpness 






fontSize 


11 






fontStyle 






FontThickness 







Figure 5-7 

Modification des proprietes de style 



[@ Source 
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1 













Figure 5-6 Visualisation du style sur un composant Panel 

Toutes les proprietes de style de la feuille CSS appliquees au composant 
sont egalement modifiables directement via le panneau Flex Properties 
(figure 5-7). 

Assistant de creation CSS en ligne 

Vous trouverez egalement un assistant de creation en ligne de CSS pour 
Flex a I'adresse suivante : 
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html 

Le Flex 3 Style Explorer permet au developpeur de selectionner n'importe 
quel composant du firamework Flex et de le styliser avec I'assistance 
d'une interface utilisateur qui evite de modifier le code. Cet assistant est 
compose de quatre panneaux qui segmentent I'interface (figure 5-8) : 

• le premier panneau, a gauche, permet de selectionner un composant 
sur lequel on appliquera un style ; 

• le second panneau, STYLE CONTROLS, permet d'ajuster les proprietes 
de style du composant selectionne ; 

• le troisieme panneau, SANDBOX, est une fenetre de visualisation en 
temps reel du composant stylise ; 

• enfin, le dernier panneau CSS affiche le code CSS des modifications 
de style appliquees. 
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Pour finir en beaute, I'icone Export All CSS, en bas du premier panneau, 
permet de copier I'ensemble des proprietes CSS modifiees. II ne vous 
reste plus qu'a coUer ces instructions dans une feuille CSS : 

Code retourne par I'assistant de creation CSS en ligne 

Panel { 

borderStyle: solid; 

borderAl pha: 1; 

cornerRadius: 0; 

headerHeight: 24; 

backgroundColor: #000000; 

shadowDi recti on: right; 

titleStyleName: "panneauStyle" ; 
} 

.mypanelTitle { 

color: #bde9fa; 

fontFamily: Arial; 

fontWeight: bold; 
} 




Figure 5-8 Modification des proprietes de style d'un composant 
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AlLER PIUS LOIN Integration d'une icdne 
dans I'en-tete d'un TitleWindow 

II est possible d'ajouter une icone dans I'en-tete de 
votre panneau. Ceci n'est pas possible via la feuille 
de style CSS. II faut done rajouter directement, 
dans la balise TitleWindow, la propriete 
ti tl elcon, suivie du chemin d'acces de I'icone 
graphique pour inserer I'element. L'effet est visible 
sur la figure 5-9 (remarquez la petite etoile jaune 
devant le titre) : 

titleIcon="®Embed(' assets/ui/ 
star_icon. png' )" 



Figure 5-9 

Modification des proprietes 
de style d'un composant 



Le style du composant Panel est desormais defini et integre dans notre 
projet Flex via le fichier MediaFoot .ess. II faut desormais demander a 
notre conteneur de type TitleWindow d'utiliser le style defini en CSS 
portant le nom de panneauStyle. 

Pour ce faire, il suffit simplement d'ajouter la propriete styleName dans 
la balise TitleWindow et d'indiquer le nom du style a utiliser : 

Utilisation d'un style dans TitleWindow 

<mx:Ti tleWi ndow id="windowEdito" width="100%" height="100%" 
layout="absol ute" title="EDITO" showCloseButton="true" 

StyleName ="panneauStyle" 
</mx : Ti tl eWi ndow> 

Compilez maintenant le projet et admirez le resultat dans votre naviga- 
teur Internet favori (figure 5-9). 



MEDIA FOOT 



RJCH INTERNET EXPERIENCE - SPORT MEDIA LAaORATOFtY 



Home I Edito | Fil infos | Photo Galerie | Sondage | Match Live | Boutique 



right © 2009 MediaFoot. Tou? droit? 



Integrer les autres panneaux 

Procedons maintenant a I'integration du second panneau Calendrier. Ce 
panneau ne correspond pas a un module specifique de notre etude de cas 
mais nous allons le positionner juste en dessous du panneau Edito. 

Rappelons que nous travaillons a I'interieur d'un conteneur Canvas. II est 
done indispensable de specifier les coordonnees (x,y) de tous les conte- 
neurs enfants. Nous souhaitons integrer un nouveau conteneur VBox au 
panneau Calendrier et nous devons done fournir les valeurs de son abseisse 
et de son ordonnee. Ceci peut etre fait manuellement, directement dans le 
code, mais il est plus pertinent d'utiliser les fonctionnalites d'assistance de 
positionnement des composants du mode Design. Passez done en mode 
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Design et positionnez un nouveau conteneur VBox en dessous du panneau 
Edito (figure 5-10). Des lignes bleutees apparaissent et servent de guides 
de positionnement pour placer votre composant. Revenez en mode Source, 
les coordonnees sont automatiquement generees. 




Figure 5-10 

Positionnement d'un nouveau 
conteneur en mode Design 



Ajoutez au code ainsi produit dans le conteneur VBox (que vous aurez iden- 
tifie sous le nom de vBoxCalendn'er Q pour le differencier du precedent) 
un composant de style TitleWindow ayant les memes proprietes que le pan- 
neau Edito, excepte celles definissant I'identifiant (nommez-le par exemple 
wi ndowCal endar) Q. Donnez a I'en-tete le titre « CALENDRIER » ©. 

Panneau CALENDRIER 



<! — calendn'er --> 

<mx:VBox id="vBoxCalendrier" width="235" height="189" y="236" 
<mx: TitleWindow id="windowCal endar" widtli="100%" Q 
lieight="100%" layout="absolute" title="CALENDRIER" Q 

sliowCloseButton="true" 
styleName="panneauStyle" 

titleIcon=" ©Embed ( ' assets/ui/star_icon . png ' ) "> 
</mx:Ti tleWi ndow> 
</mx:VBox> 

Compilez et visualisez le resultat (figure 5-11). 



'0"> o 
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Figure 5-11 

Creation du panneau Calendrier 



R 



MEDIA . 



RICH INTERNET EXPERIENCE - SPORT MEDIA LABDRATORY 




Nous allons proceder ainsi pour la creation des autres panneaux. 



MEDIA FOOT 



RICH INTERNET EXPERIENCE - SPORT MEDIA LABORATDRT 



Figure 5-12 

Creation du panneau FIL INFOS 



7t EDITO X 


■^ CALENDniEH 


X 


^ FIL INFOS X 


1 
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Panneau FIL INFOS 



<! — f i 1 infos --> 

<mx:VBox id="vBoxFil Infos" width="235" height="189" y="235' 
<mx:TitleWindow id="windowFil Infos" width="100%" 
height="100%" layout="absolute" title="FIL INFOS" 

showCloseButton="true" 
styleName="panneauStyle" 

titleIcon="@Embed( ' assets/ui/star_icon . png ' ) "> 
</mx:Ti tleWi ndow> 
</mx:VBox> 



'243"> 



Panneau MATCH LIVE 

<! — match live --> 

<mx:VBox id="vBoxMatchLive" width="199" height="189" y= 

x="486" > 

<mx:TitleWindow id="windowMatchLive" width="100%" 

height="100%" layout="absolute" title="MATCH LIVE" 

showCloseButton="true" 

styleName="panneauStyle" 

titleIcon=" ©Embed ( ' assets/ui/star_icon . png ' ) "> 
</mx:Ti tleWi ndow> 
</mx:VBox> 



"38" 



Attention Ajustement des largeurs 

La largeur du bandeau ticker est desormais 
inferieure aux largeurs reunles des panneaux 
Edito et Match Live (figure 5-13). En effet, le 
conteneur Canvas s'est elargi afin de 
s'adapter a I'ajout du panneau Match Live. 
Vous pouvez aussi regler la largeur du bandeau 
en appliquant une valeur de 100% au para- 
metre wi dth le concernant. 



Panneau CLASSEMENT 



<l — classement --> 

<mx:VBox id="vBoxClassement" width="199" height="277" y="235" 

x="486" > 

<mx:TitleWindow id="windowClassement" width="100%" 

height="100%" layout="absolute" title="CLASSEMENT" 

showCloseButton="true" 

styleName="panneauStyle" 

titleIcon=" ©Embed ( ' assets/ui/star_icon . png ' ) "> 
</mx:Ti tleWi ndow> 
</mx:VBox> 



Panneau GALERIE 



<l — galerie --> 

<mx:VBox id="vBoxGalerie" width="478" height="80" y="432" 
<mx:TitleWindow id="windowGalerie" width="100%" 

height="100%" layout="absolute" title="GALERIE PHOTO" 

showCloseButton="true" 
styleName="panneauStyle" 

titleIcon=" ©Embed ( ' assets/ui/star_icon . png ' ) "> 
</mx:Ti tleWi ndow> 
</mx:VBox> 



:"0" 
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Panneau BOUTIQUE 

<!-- boutique --> 

<mx:VBox id="vBoxBoutique" width="235" height="200" y="520' 
x="0"> 

<mx:Ti tleWi ndow id="windowBoutique" width="100%" 
height="100%" layout="absol ute" title="BOUTIQUE" 
showCloseButton="true" 
styl eName=" panneauStyl e" 

ti tleIcon="®Embed(' assets/ui/star_icon. png ' ) "> 
</mx : Ti tl eWi ndow> 
</mx:VBox> 

Panneau STATISTIQUES 

<!-- statistiques --> 

<mx:VBox id="vBoxStat" width="235" height="200" y="520" 
x="243"> 
<mx:Ti tleWi ndow id="windowStat" width="100%" 

height="100%" layout="absol ute" title="STATISTIQUES" 
showCloseButton="true" 
styl eName=" panneauStyl e" 

ti tleIcon="®Embed(' assets/ui/star_icon. png ' ) "> 
</mx : Ti tl eWi ndow> 
</mx:VBox> 

Panneau SON DAG E 



<!-- sondage — > 

<mx:VBox id="vBoxSondage" width="199" height="200" y-- 
x="486"> 

<mx:Ti tleWi ndow id="windowSondage" width="100%" 
height="100%" layout="absol ute" title="SONDAGE" 
showCloseButton="true" 
styl eName=" panneauStyl e" 

ti tleIcon="®Embed(' assets/ui/star_icon. png ' ) "> 
</inx : Ti tl eWi ndow> 
</mx:VBox> 



'520" 



En resume 

Dans ce chapitre, nous avons vu comment utiliser Flex Builder et ses com- 
posants pour concevoir I'ebauche d'une interface utilisateur : appliquer une 
feuUle de style CSS aux composants de Flex, mettre en forme ces compo- 
sants grace aux styles et les agencer entre eux de fa9on ergonomique. 

Dans le chapitre suivant, nous irons encore plus loin dans I'elaboration 
d'une interface evoluee en integrant les effets et les transitions disponi- 
bles avec Flex. 
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Figure 5-13 

L'interface utilisateur et ses panneaux 
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Home page - conteneur principal 



Fonctionnalites avancees : etats 
d'affichage, effets et transition 



Afin deviter les difficultes de navigation propres aux sites 
HTML classiques, les applications RIA en Flex sont souvent 
construites suivant le concept des view states qui permettent de 
creer des etats d'affichage differents. Ce concept permet 
notamment de creer des formulaires dynamiques complexes ne 
necessitant pas le rechargement systematique et complet d'une 
page a chaque interaction avec I'utilisateur. Combines aux 
effets et transitions disponibles dans Flex (merci Flash 
Player !), les etats d'affichage sont devenus incontournables 
dans le developpement d'une application RIA. 



SOMMAIRE 

► Integration d'un etat 
d'affichage 

► Les effets 

► Les declencheurs 

► Les transitions 

MOTS-CLES 

► etat d'affichage (view state) 

► effet (effect) 

► declencheur [trigger] 

► comportement (be/iawor) 

► transition 



Clin d'sil Flex View States et Flash 
Timeline, meme combat ? 

Les concepteurs Flash retrouveront avec les view 
states un concept finalement assez similaire au 
principe de la timeline. En effet, definir differents 
etats d'affichage dans Flex revient plus ou moins a 
travailler sur plusieurs etats differents d'une time- 
line avec Flash... 



Hormis dans les applications Ajax, les pages HTML presentent souvent 
une navigation difficile en raison de leur rafraichissement systematique a 
chaque interaction avec un utilisateur. En effet, les sites web 1.0 tradi- 
tionnels sont habituellement construits avec des pages HTML indivi- 
duelles, plus ou moins hierarchisees, connectees les unes aux autres par 
des hyperliens permettant la navigation de page en page. 

Les sites Internet etant de plus en plus complexes, ce modele Web 1.0 
est devenu inefficace et obsolete. A chaque fois que I'internaute clique 
sur un lien, une requete est envoyee a un serveur web, qui doit localiser la 
page d'ou provient la requete, analyser la reponse a retourner, envoyer 
cette reponse via un canal Internet pour finir par un chargement des 
donnees dans un navigateur. 

Or, depuis I'avenement du Web 2.0, une interaction utilisateur sur une 
page web ne necessite pas systematiquement un echange entre un client 
et un serveur. Dans la plupart des cas, c'est une operation superflue qu'il 
convient done de limiter. 

Les view states de Flex permettent de reduire les echanges client-serveur 
inutiles. En effet, le mecanisme induit des vieiu states permet de struc- 
turer de fa9on ergonomique votre application afin de gerer efficacement 
les differents etats d'affichage de I'interface utilisateur. Imaginez par 
exemple un formulaire d'identification. Ce formulaire pourrait se 
deployer et afficher des informations supplementaires apres identifica- 
tion de I'internaute. II est done inutile de recharger integralement une 
nouvelle page a cet effet, et il serait plus pertinent de proposer un nouvel 
etat d'affichage (c'est-a-dire un nouveau vteiu state). 

Dans une application Flex bien con9ue, les utilisateurs interagissent et 
accedent a I'information immediatement, sans delai de rafraichissement. 
L'application RIA est discretement organisee en sections ou etats. Nous 
allons appliquer ce concept a la page d'accueil de notre etude de cas, afin 
de materialiser tout I'interet de cette technique combinee aux effets de 
transitions disponibles avec Flex. 



Integration d'un etat d'affichage 

Prenons par exemple le panneau i.d\to de notre page d'accueil. Ce panneau 
integrera ulterieurement du contenu texte et graphique. II serait egalement 
bon, d'un point de vue ergonomique, de proposer un element de controle 
pour « deployer » ce panneau et I'agrandir, afin qu'il affiche davantage 
d'informations (figures 6-1 a 6-3). Ce faisant, les panneaux disposes en 
dessous du panneau Ecf/to devront automatiquement se decaler vers le bas 
pour eviter une superposition inopportune avec le panneau developpe. 
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s 



^s 



Figure 6-1 

Etat d'affichage de base : notez I'ajout 

d'un element de controle dans le panneau Edito. 




Figure 6-2 

Un die sur I'element de controle permettra 
la permutation vers le second etat d'affichage. 
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Figure 6-3 

Second etat d'affichage : le panneau Edito 

est « deploye », sa surface d'affichage est 

done agrandie et les panneaux sous-jacents 

sont deplaces vers le bas. 




Lesaviez-VOUS? Etat d'affichage 
du conteneur principal 

Le view state est un concept applicable a 
n'importe quel composant Flex, y compris au con- 
teneur principal <mx: Application>. 



Etat principal de {'application 

Afin de mettre en ceuvre I'effet decrit dans le paragraphe precedent, il est 
necessaire d'integrer un element de controle qui declenchera la permuta- 
tion d'un etat vers un autre. II sera done egalement indispensable d'inte- 
grer un second controle pour permettre de revenir vers I'etat de base. 

Le diagramme de la figure 6-4 schematise ce principe simple d'aller- 
retour entre deux etats. Le premier etat porte le nom de BASE STATE. II 
correspond a I'etat initial de I'application, I'etat par defaut. II integre un 
controle permettant le basculement vers le second etat appele EDITO 
OPEN STATE, qui lui-meme contient un element de controle permettant a 
I'utilisateur de retourner a I'etat initial. 



Etapes de creation des etats d'affichage 

Nous sommes done en presence de deux etats. L'etat initial porte tou- 
jours le nom de Base state (etat de base). II correspond a I'affichage de 
I'application principale. Si vous creez un composant personnalise, son 
etat de base correspond a son affichage par defaut. 
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EDITO OPEN STATE 



Figure 6-4 

Basculement entre deux etats 



On cree des etats additionnels en modifiant I'etat de base ou un autre 
etat. A I'interieur meme d'un etat, vous pouvez aj outer, modifier ou sup- 
primer des composants, des proprietes, des styles ou des evenements. 

La derniere etape consiste a declencher le changement d'etat, generale- 
ment via une interaction utilisateur, mais cela peut aussi se faire via une 
interaction systeme. 

Pour resumer les trois etapes, nous avons : 

1 Creation d'un etat initial (ou Base state) avec : 

— une application par defaut ; 

— un composant personnalise par defaut. 

2 Creation d'un ou plusieurs etats additionnels avec : 

— modification de I'etat de base ou d'un autre etat ; 

— ajout, modification, suppression de : 

— composants ; 

— proprietes et styles ; 

— evenements. 

3 Creation d'evenements pour declencher le changement d'etat. 

Creer un etat additionnel 

Les etats d'affichage peuvent etre crees et geres visuellement grace au 
mode Design de Flex Builder 3 ou bien directement dans le code MXML. 
Nous allons commencer par creer notre etat additionnel en utilisant le 
mode Design et ensuite controler I'impact sur le code en mode Source. 



83 



ASTUCE Ouverture du panneau States 

II se peut que le panneau States soit ferme. Pour 
I'ouvrir, vous pouvez le selectionner directement 
dans le menu Window>States. 



1 Ouvrez la page Home.mxml car c'est sur ce composant que nous vou- 
lons appliquer des vtew states. Permutez ensuite en mode Design. 
Vous noterez sur la figure 6-5 que I'affichage par defaut de I'applica- 
tion est appele Base state. 

2 Pour ajouter un nouvel etat, il suffit de selectionner <Base state> dans le 
panneau State (parun clic droit) puis de cliquer sur New State (figure 6-6). 



m states It 


m.-/ ^ 


= Q 


M <Base states (start) 




^ Flex Properties ^ 


ss @ 


= Q 


[^ No item is selected. 


▼ Common 


▼ Style 


▼ Layout 





Figure 6-5 

Le panneau States affiche I'etat initial (Base state). 



H states S3 ' 
HI 



^ Edit State Properties.. 
3 Delete State 



Flex Properties ^ 
[aI No item is selected. 

▼ Common 

▼ Style 

▼ Layout 



IS 



Figure 6-6 

Creation d'un nouvel etat 



3 Dans la boite de dialogue New State (figure 6-7), entrez le nom du 
nouvel etat (par exemple : edi to_open_state). Ne cochez pas I'option 
Set as start state car nous preferons conserver I'etat Base state comme 
etat initial. 

4 En cliquant sur le bouton OK, un nouvel etat est ajoute sous le Base 
state (a partir duquel il est cree), comme sur la figure 6-8. 



f* New state 



[3 



Name; edito_open_state 



Based on; <Ease state > 



I I Set as start state 



▼ Common 

▼ Style 

▼ Layout 



Figure 6-7 

Nom du nouvel etat 
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§ Flex Properties E3 | 
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= °l 
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T Common 


T style 


▼ Layout 



Figure 6-8 Le nouvel etat s'insere sous I'etat de base, 
qui est son point de depart. 
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Passons a present en mode Source pour verifier le code MXML genere 
par cette operation. 

Creation du View State edito_open_state 

<! — View States — > 
<mx: states> 

<mx: State name="edito_open_state"/> 
</mx: states> 

Un bloc d'instructions encadre paries balises <mx: states> et </mx: states> 
a done ete cree. Un Vi ew State portant le nom edi to_open_state a egale- 
ment ete genere, comme prevu. A ce stade, aucune autre instruction n'a ete 
ajoutee, car aucune modification entre I'etat de base et edi to_open_state 
n'a ete integree. Nous allons done proceder maintenant a ces modifications. 

Modifier I'etat additionnel 

Nous souhaitons, dans un premier temps, agrandir notre panneau Edito 
en augmentant sa hauteur. Cette operation peut se faire en ajoutant 
I'instruction suivante apres la definition de I'etat edi to_open_state : 

Agrandissement du panneau Edito 

<! — View States — > 
<mx: states> 

<mx: State name="edito_open_state"/> 

<mx:SetProperty target="{vBoxEdito}" name="height" val ue="300"/> 

</mx: states> 

Nous utilisons ici la classe SetProperty qui specifie une valeur de pro- 
priete, effective uniquement lors du passage au nouvel etat d'affichage. 
La balise <mx: SetProperty> possede les attributs suivant : 

Attributs de la classe SetProperty 

<mx: SetProperty 
Properties 
name="nul 1 " 
target="nul 1 " 
val ue="undefi ned" 
/> 

Vous remarquerez que, dans notre cas, nous avons regie la hauteur du 
panneau a 300 pixels (val ue="300"). Pour cela, on affecte a I'attribut 
target I'identifiant {vBoxEdito} (qui est en fait I'identifiant de notre 
VBox du panneau Edito), et on donne a sa hauteur (name="height") une 
valeur de 300 pixels. 
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Tableau 6-1 SetProperty 



SetProperty 


Description j 


Paquetage 


mx. states 


Classe 


public class SetProperty 


Heritage 


SetProperty -> Object 


Implemente 


lOverride 



Passer d'un etat a I'autre 

II faut a present integrer un controle qui declenchera la permutation des 
deux etats d'affichage. Nous choisissons d'utiliser pour cela un controle 
de LinkButton, qui s'apparente a un bouton de controle sans bordure 
dont le contenu est mis en evidence lorsque I'utilisateur le survole avec le 
curseur de la souris. Ce controle doit etre place dans le composant 
TitleWindow du panneau Edito : 

Controle pour declencher le passage au second View State 

<!-- edito — > 

<mx:VBox id="vBoxEdito" width="478" height="189" y="38" x="0"> 
<mx:Ti tleWi ndow id="windowEdi to" width="100%" height="100%" 
layout="absol ute" ti tle="EDITO" showCloseButton="true" 
styleName="panneauStyle" 

titleIcon= "©Embed (' assets/ui/star_icon. png ' ) "> 
<mx: LinkButton id="l inkButtonEdito" label="+ en savoir plus" 
click="currentState='edito_open_state"' right="0" 
bottoni="0" fontWeight="normal "/> 
</mx : Ti tl eWi ndow> 
</mx:VBox> 

Tableau 6-2 LinkButton 



LinkButton 


Description V 


Paquetage 


mx. controls 


Classe 


public class LinkButton 


Heritage 


LinkButton ^ Button ^ UlComponent ^ FlexSprite ^ Sprite ^ 
DisplayObjectContainer ^ InteractiveObject ^ DisplayObject ^ 
EventDispatcher -> Object 



Le LinkButton possede par defaut les attributs suivants : 
Attrlbuts du LinkButton 



<mx: Li nkButton 
Styles 

cornerRadius="4"" 
roll0verColor="0xEEFEE6" 
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select! onColor="0xB7F39B" 
textRollOverColor="Ox2B333C" 
textSelectedColor= "0x2833 3C" 

/> 

De notre cote, nous lui specifions un identifiant (id="linkButtonEdi to"), 
un texte (label="+ en savoir plus"), un evenement 

click="currentState= ' edito_open_state ' " et une position relative par 
rapport a son conteneur, en bas a droite (n'ght="0" bottom="0"). 

Compilez ensuite votre application et visualisez le resultat (figure 6-9). 
II suffit alors de cliquer sur le lien + en savoir plus pour declencher la per- 
mutation d'etats. 



S 



^S 



^ EDITO X 


^ CALENDHIEH X 


J*- FIL INFOS X 

1 







Figure 6-9 

Le panneau Edito s'est elargi, mais il est 
couvert par les panneaux sous-jacents. 



Nous constatons un premier probleme : en elargissant le panneau Edito, 
celui-ci est recouvert par les panneaux positionnes en dessous. II faut 
done prevoir une translation verticale vers le bas de tous les panneaux 
inferieurs. 

Modifier les autres panneaux en consequence 

Dans notre cas, il est preferable de proceder a ces modifications en mode 
Source. Mais il serait tout aussi aise de le faire en mode Design. 

Dans son etat initial, notre panneau Edito possede une hauteur figee a 
189 pixels. Apres permutation, nous I'agrandissons a 300 pixels, ce qui 
represente une augmentation de 111 pixels. Logiquement, nous devons 
done decaler vers le bas tous les panneaux concernes de 111 pixels. 

Commen9ons par le panneau Calendrier. Dans son etat initial, la valeur 
de I'ordonnee du panneau est y=236. On obtient done y=347 pixels en 
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ajoutant Ilia cette valeur. Une translation vers le bas de 347 pixels de 
son ordonnee devrait produire I'instruction suivante : 

Modification du second View State 

<!-- View States --> 

<mx: states> 

<mx: State name="edito_open_state"> 

<mx: SetProperty target="{vBoxEdito}" name="height" val ue="300"/> 
<mx:SetProperty target="{vboxCalendrier}" name="y" val ue="347"/> 

</mx: State> 
</mx: states> 

Compilez et visualisez le resultat (figure 6-10). 



Figure 6-10 

Le panneau Calendrier est decale vers le bas 
lors du deploiement du panneau Edito. 



3^ EDITO 


ih FIL INFOS X 


]4- CALENDRIER X 1 





L'effet escompte est done correctement integre. Nous allons I'appliquer a 
tous les autres panneaux concernes : 

iviodification du second View State 



<!-- View States 
<mx: states> 

<mx: State name= 



'edito_open_state"> 



<mx: SetProperty target^ 

<mx: SetProperty target^ 

<mx: SetProperty target^ 

<mx: SetProperty target^ 

<mx: SetProperty target^ 

<mx: SetProperty target^ 

</mx: State> 
</mx: states> 



="{vBoxEdito}" name="height" val ue="300"/> 
="{vboxCalendrier}" name="y" val ue="347"/> 
="{vBoxFi llnfos}" name="y" val ue="347"/> 
="{vBoxBoutique}" name="y" val ue="631"/> 
="{vBoxStat}" name="y" val ue="631"/> 
="{vBoxGalerie}" name="y" val ue="543"/> 
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Retour a I'etat initial 



Notre View State est done correctement integre. Nous souhaitons nean- 
moins ajouter un element de controle declenchant le retour a I'etat ini- 
tial. Ceci est possible en utilisant notre LinkButton et en lui appliquant 
les modifications de proprietes suivantes : 

Modification du Linl<Button 

<! — View States — > 
<mx: states> 

<mx: State name="edito_open_state"> 



^"{vBoxEdito}" name="height" val ue="300"/> 
^"{vboxCalendrier}" name="y" val ue="347"/> 
^"{vBoxFi llnfos}" name="y" value="347"/> 
^"{vBoxBoutique}" name="y" value="631"/> 
^"{vBoxStat}" name="y" val ue="631"/> 
^"{vBoxGalerie}" name="y" val ue="543"/> 
<mx:SetProperty target="{l initButtonEdito}" name="label" value="- reduire"/> 
<mx:SetEventHandler target="{l initButtonEdito}" name="clicl<" handler="currentState= 
</mx: State> 
</mx: states> 



<mx:SetProperty target= 
<mx:SetProperty target= 
<mx:SetProperty target= 
<mx:SetProperty target= 
<mx:SetProperty target= 
<mx:SetProperty target= 



'/> 



Nous modifions son contenu texte en le rempla9ant par "- reduire" 
pour indiquer qu'un second clic sur cet element produira I'effet inverse. 
Ensuite, nous definissons un evenement different, via I'instruction 
name=" click" handler="currentState= ' ' " afin de declencher un retour 
vers I'etat initial Base state. 



Attention 

Retour vers I'etat initial Base state 

En utilisant currentState=' ' sans indi- 
quer d'identifiant (valeur vide entre les guille- 
mets), vous specifiez implicitement un retour 
vers I'etat initial Base state. 



Effets et transitions 

Le basculement entre les deux etats definis dans le chapitre precedent est 
visuellement un peu rude. II serait alors regrettable de disposer de la 
machine virtuelle Flash et de ne pas utiliser ses capacites d'animations 
graphiques. D'autant plus que le framework de Flex offre tout un 
bataillon d'effets et de transitions prets a I'emploi, sans que Ton ait 
besoin de saisir une seule ligne de code ActionScript ! 

Ajouter des effets subtils de transition dans une application permet ega- 
lement d'enrichir I'experience de I'utilisateur. En effet, les transitions et 
les mouvements d'elements d'une interface utilisateur peuvent aider a 
mettre en evidence une information importante et alerter I'internaute sur 
un point precis. 

Prenons le cas de notre projet. La transition entre les deux etats manque 
de douceur. Nous allons utiliser les capacites de Flex pour fluidifier cette 
transition, en creant par exemple un effet sur le panneau Edito (anima- 
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tion d'agrandissement progressive) et un autre effet de deplacement vers 
le bas des panneaux sous-jacents. 

Une large gam me d'effets 

Avant de poursuivre notre projet, arretons-nous un instant sur trois 
notions fondamentales concernant les effets appliques avec Flex. EUes 
portent les noms d'effet {effect), de declencheur {trigger) et de comporte- 
ment {behavior). 

Les effets (effects) 

Un effet s'applique sur un composant Flex. L'effet peut etre audio et/ou 
visuel et, applique sur un composant, il provoque une modification de ce 
dernier pendant une duree de temps precise. Les effets disponibles dans 
Flex sont resumes dans le tableau ci-dessous. 

Tableau 6-3 Effets disponibles dans Flex 



Effet 



Description 



AnimateProperty Fait evoluer une propriete de style d'un composant pendant un temps defini. Par exemple, pour modifier la largeur d'un 
bouton, vous pouvez specifier un effet sur sa propriete wi dth pendant un certain laps de temps. 



Blur 



Permet d'appliquer un effet de flou sur un composant. II peut aussi adoucir les details d'une image. 



Dissolve 



Permet de diminuer la couche alpha d'un composant pour le faire disparaitre. 



Fade 



Permet, au contraire, de faire apparaTtre un composant en augmentant progressivement sa couche alpha. 



Glow 



Pour appliquer un halo lumineux sur un composant. 



Ins 



Pour faire apparaTtre un composant en I'agrandissant ou bien en le contractant. 



Move 



Pour modifier la position d'un element pendant un laps de temps. En d'autres mots, il permet de deplacer un composant. 



Pause 



Applique une simple pause. 



Resize 



Modifie la hauteur et/ou la largeur d'un composant durant un laps de temps defini. 



Rotate 



Fait pivoter un composant autour d'un point precis. 



SoundEffect 



Joue un fichier audio au format MP3. 



WipeDown Applique a un composant, il donne I'impression que le composant se defend vers le bas, comme s'il se deployait 

progressivement. 



WipeLeft 



Comme WipeDown, mais en direction de la gauche. 



WipeRight 



Comme WipeDown, mais vers la droite. 



WipeUp 



Comme WipeDown, mais vers le haut. 



Zoom 



Applique un effet de zoom (grossissant) ou de zoom inverse sur un composant. 
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Les declencheurs (triggers) 

Pour initier un effet, nous aurons besoin d'un « declencheur » (ou trigger 
en anglais). II s'agit d'une action appliquee a un composant. Les triggers 
sont similaires aux evenements, mais ils sont utilises specifiquement 
pour declencher des effets. Par exemple, un clic de souris peut etre le 
declencheur d'un effet Zoom. 



Ensavoirpius AS3 triggers 



II est possible de declencher des effets sans utiliser 
de triggers en MXML, mais directement en 
ActionScriptvia la methode play (). 



Les comportements (behaviors) 

Terminons par un petit mot au sujet des comportements {behaviors en 
anglais). Un comportement est la combinaison d'un effet et d'un declen- 
cheur, pour lancer une animation sur un composant. 

L'art de la transition 

Les transitions dans Flex sont en realite des effets appliques aux compo- 
sants pendant les permutations de differents etats d'affichage. Pour inte- 
grer une transition, il faut encadrer un effet par la balise 
<mx:Transition>, elle-meme encadree par la balise <mx: transitions>. 

Par exemple, pour appliquer I'effet Resize lors du passage de I'etat initial a 
I'etat edi to_open_state, il est possible d'ecrire les lignes suivantes : 

Appliquer I'effet Resize au passage de I'etat initial a I'etat edito_open_state 

<l — Transitions — > 
<mx: transitions> 

<mx:Transi tion fromState="" toState="edi to_open_state"> 
<mx:Resize target="{vBoxEdito}" duration="1000"/> 

</mx:Transition> 
</mx : t ran si ti ons> 

La classe Transition definit un ensemble d'effets qui est joue lors du 
changement d'un etat a un autre. II faut done specifier I'etat initial 
(fromState) et I'etat successif (toState). 

Tableau 6-4 Transition 



Transition 


Description 


Paquetage 


mx.states 


Classe 


public class Transition 


Heritage 


Transition -^ Object 



L'effet de transition Resize defini ici va s'appliquer au panneau Edlto 
identifie par la propriete target et la valeur vBoxEdito. La duree de 
I'effet est ajustee a 1000 ms (1 seconde) via la propriete duration. 
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En SAVOIR plus Eff et a retardement 

La propriete StartDelay permet de retarder le 
declenchement d'un effet. 



Ajoutez ces instructions MXML apres le bloc d'instructions definissant 
les etats d'affichage, compilez et visualisez le resultat en cliquant sur le 
declencheur 1 i nkButtonEdi to. 

Le panneau se deploie correctement avec I'effet escompte. Mais vous 
noterez deux nouveaux problemes : 

• malgre I'effet de transition, les panneaux sous-jacents ne se sont tou- 
jours pas agrandis progressivement, mais se sont decales brutalement 
vers le bas, sans transition douce ; 

• ensuite, une fois le panneau Edito deploye, lorsque vous invoquez le 
meme declencheur, vous remarquez que I'effet de transition Resize 
inverse (retrecissement du panneau) n'est pas active. 

Ceci est lie au fait que la transition codee ne s'applique qu'a la transition 
fromSate — toState (de I'etat de base vers I'etat edi to_open_state) et 
non a la transition inverse (de edito_open_state vers I'etat de base). Si 
vous souhaitez appliquer I'effet de transition a tous les basculements 
d'etats, il vous faudra done utiliser le caractere joker * comme ceci : 
<mx:Transi tion f romState="*" toState="*"> 

L'effet de transition applique aux autres panneaux est possible en utUisant 
I'effet Move. Pour activer le lancement simultane de plusieurs effets (ici un 
redimensionnement Resize et un deplacement Move), il faut utiliser la classe 
Paral 1 el en precisant les composants concernes (propriete targets). 

Tableau 6-5 Parallel 



Parallel 


Description 


Paquetage 


mx. effects 


Classe 


public class Parallel 


Heritage 


Parallel ^ CompositeEffect ^ Effect -> EventDispatcher -> Object 


Sous-classes 


DefaultListEffect, DefaultTileListEffect 



Nous appliquons cette classe a notre etude de cas en integrant les lignes 
d'instructions MXML suivantes : 



En SAVOIR PLUS Sequence d'effets 

II est egalement possible d'appliquer plusieurs 
effets les uns apres les autres en les encadrant 
sequentiellement avec une balise 

<mx: Sequence>. 



Transition avec effets simultanes 

H 

<mx: transi tions> 

<mx:Transition f romState="*" toState="*"> 

<mx:Parallel targets="{[vBoxBoutique, vBoxStat, 
vBoxCalen'e, vboxCalendn'er, vBoxFillnfos , vBoxEdito] }"> 
<mx:Move duration="1000"/> 
<mx:Resize duration="1000"/> 
</mx: Paral 1 el > 
</mx :Transi ti on> 
</mx: transi tions> 
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Compilez le projet et visualisez le resultat. La transition ainsi appliquee 
est parfaite. 



En resume 

Ce chapitre nous a permis d'introduire et d'appliquer quelques fonction- 
nalites fondamentales de Flex pour la conception d'interfaces RIA, telles 
que la creation d'etats d'affichage (vtew states), I'application des effets et 
des transitions. Nous verrons plus loin comment developper d'autres fonc- 
tionnalites encore plus complexes et evoluees en utilisant le langage 
ActionScript 3.0, langage de script que nous allons introduire dans le cha- 
pitre suivant avec d'autres notions fondamentales comme la liaison de 
donnees {data binding) et le chargement dynamique de donnees XML. 
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MODULE 1 - EDITO 



Gestion des donnees 
avec Flex 



La gestion des donnees dans une application RIA est une 
notion primordiale, car ces applications interagissent souvent 
avec des serveurs de base de donnees. Decouvrons a present les 
bienfaits de la technique du data binding (liaison de donnees) 
en I'appliquant au module Edito de notre etude de cas. . . 
Nous verrons aussi comment Flex peut gerer et charger 
dynamiquement des donnees a partir d'un fichier XML 
et en utilisant le langage ActionScript 3.0. 



SOMMAIRE 

► Chargement dynamique 
de donnees 

► Premier pas avec 
ActionScript 3.0 

► Concepts de programmation 
orientee objet 

► Processus de recuperation 
de donnees 

► Le data binding ou liaison 
de donnees 

MOTS-CLES 

► data binding (liaison de donnees) 

► HTTPService 

► ArrayCollection 

► DataGrid 

► Objet 

► Classe 

► Paquetage 



Dans ce chapitre, nous allons concevoir le premier module de notre 
etude de cas. Ce module aura deux fonctions principales : 
• afficher un edito classique avec un titre, une date, une image et un 
article, le tout charge a partir d'un fichierXML externe (figure7-l) ; 



Figure 7-1 

Apergu de la fonction Edito de I'etude de cas 
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proposer un prototype de formulaire (formulaire d'inscription a une 
newsletter), non fonctionnel mais qui fera figure d'introduction au 
concept du data binding avec Flex (figure 7-2). 



Figure 7-2 

Apergu de la fonction Formulaire 
du meme module 
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Commen9ons par structurer le module Edito. Ce module s'integre dans le 
composant personnalise Home.mxml. Editez ce fichier : nous allons com- 
mencer par creer son contenu en le chargeant avec un fichier XML externe. 



Chargement de donnees externe 



Les solutions serveur disponibles 

Une application Flex peut communiquer avec un serveur en utilisant les 
solutions suivantes : 

• HTTPService est un service HTTP qui renvoie des donnees, par 
exemple au format XML ; 

• WebService permet de faire appel a des services web au standard 
SOAP {Simple Object Access Protocol) ; 

• BlazeDS, sous-ensemble Open Source du LiveCycle Data Services 
(LCDS) et qui permet de faire du remottng (invocation d'objets dis- 
tants pour optimiser les echanges entre client et serveur), du data push 
(personnaliser la diffision de certaines donnees en temps reel), etc. ; 

• Granite Data Services, alternative Open Source a LCDS. 

Nous nous focaliserons ici sur la recuperation de donnees via le service 
HTTPService. Les autres methodes seront abordees plus loin dans 
I'ouvrage. 



Telecharger BlazeDS et GraniteDS 

BlazeDS : 

* http://opensource.adobe.com/wiki/display/ 
blazeds/BlazeDS 

Granite Data services : 

* http://www.graniteds.org 



Recuperation de donnees via HTTPService 

Les composants d'acces aux donnees du framework Flex sont structures 
selon une architecture orientee service. Ces composants utilisent des 
appels de procedure pour interagir avec des environnements serveur uti- 
lisant par exemple PHP, Microsoft ASP.NET, Java ou la solution ser- 
veur Adobe ColdFusion. Ainsi, tous les composants d'acces aux donnees 
de Flex peuvent recuperer et envoyer des donnees aux sources support a 
travers ces environnements serveurs. 

Le framework Flex nous permet de creer des composants d'acces aux 
donnees en utilisant les langages MXML ou ActionScript 3.0, introduit 
plus loin dans ce chapitre. 

II existe trois methodes pour connecter une application Flex a un serveur 
d'applications : 

• recuperer et envoyer des donnees via HTTP en utilisant le compo- 
sant HTTPService de Flex ; 
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• recuperer et envoyer des donnees via le protocole SOAP et les ser- 
vices web en utilisant e composant WebService de Flex ; 

• recuperer et envoyer des donnees via Action Message Format, format 
cree par Macromedia puis repris par Adobe, plus connu sous I'abre- 
viation AMF Ce format doit etre utilise avec le composant Remote- 
Object de Flex. 

Pour le module Edito, nous allons specifiquement travaUler avec le compo- 
sant HTTPService pour charger des donnees inscrites dans un fichierXML 
et ainsi lier les donnees receptionnees a des composants Flex. En utilisant le 
composant HTTPService du framework Flex, vous pouvez recuperer les 
donnees en utilisant les requetes GET (requete par defaut) ou POST. Vous 
pouvez soit utUiser le protocole HTTP, soit le protocole HTTPS. 

1 Pour receptionner des donnees a travers le protocole HTTP, il faut 
commencer par creer un objet HTTPService en definissant un nom 
d'instance et en assignant une URL a la recuperation des donnees. 
Aucune requete ne sera declenchee pendant la phase de creation de 
I'objet HTTPService. 

2 Ensuite, lors de la seconde etape, vous devrez creer une requete 
HTTP pour la recuperation des donnees. 

3 Enfin, une fois que les donnees seront recuperees par I'application 
Flex, vous pouvez les utiliser dans votre application. 

Appliquons maintenant cette procedure a notre etude de cas, pour creer 
I'interface Edito. 



Creer un objet HTTPService pour I'interface Edito 

Dans le composant Home.mxml, nous allons done commencer par ajouter 
un composant HTTPService avec comme nom d'instance editoData. 

Creation de I'objet HTTPService 

<mx: HTTPService id="editoData"/> 

La propriete URL du composant HTTPService peut etre indiquee en 
chemin relatif Mais vous pouvez egalement specifier un chemin absolu. 

Tableau 7-1 HTTPService 



HTTPService 


Description 


Paquetage 


mx.rpc.http.mxml 


Classe 


public class HTTPService 


Heritage 


HTTPService ^ HTTPService ^ Abstractlnvoker ^ EventDispatcher ^ 
Object 


Implemente 


IMXMLSupport, IMXMLObject 
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Les donnees peuvent etre fournies aussi bien statiquement (via un fichier 
XML, par exemple) que dynamiquement (par exemple, via un fichier JSP). 

Pour notre etude de cas, nous avons cree un fichier XML statique a 
I'interieur d'un sous-repertoire dont le chemin relatif par rapport au 
fichier d'apphcation principal est le suivant : url="assets/edi to/ 
edito_data.xml ". C'est ce chemin qu'il faudra specifier dans la propriete 
url de I'objet HTTPService instancie. 

Ouvrez ce fichier et observez son contenu. Vous noterez que la structure 
du fichier XML est constitute de plusieurs balises, dont une pour le titre 
de I'edito, une pour la date, une contenant un resume de I'article, une 
autre le contenu de I'article au complet et, enfin, une balise specifiant le 
chemin relatif et le nom du fichier image qui accompagne I'edito. 

Renseignez a present la propriete url avec le nom et le chemin du fichier 
XML: 



Propriete url de I'objet HTTPService 

<mx: HTTPService id="editoData" url="assets/edito/edi to_data.xml " /> 



Creer une requete HTTP pour recuperer les donnees 

L'objet HTTPService dispose de la methode send() pour envoyer une 
requete. Vous pouvez declencher cette methode via une interaction utili- 
sateur ou alors via un evenement systeme. Nous utiliserons ici I'evene- 
ment creationComplete, directement dans la balise Canvas du 
composant, pour declencher la methode send() : 

Methode de requete send() 

<mx: Canvas xml ns :mx="http://www. adobe.com/2006/mxml " 
width="100%" 

backgroundAlpha="0.0" height="450" 
creationComplete="editoData.send()"> 



Attention Methode sendQ 

N'oubliez pas de referencer I'identifiant de 
Tobjet HTTPService (ici : edi toData) en 
appelant la methode send () . 



Creer un gestionnaire d'evenements 

Pour finir, utilisez I'evenement result de I'objet HTTPService pour 
specifier la fonction a appeler une fois que les donnees auront ete recu- 
perees avec succes : 

Evenement result 



<mx: HTTPService id="editoData" url="assets/edito/ 
edito_data.xml " result="editoHandler (event) "/> 
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Pour notre fonction de recuperation, nous creons ainsi un gestionnaire 
d'evenements que nous nommons edi toHandler() , et nous lui passons 
un objet event en attribut. Nous abordons ici I'integration d'instructions 
codees en ActionScript 3.0 directement dans un fichier MXML. 



Point COMMUN JavasScript/ActionScript 

L'insertion de code ActionScript dans un ficliier 
IVIXIVIL est similaire a ('insertion de code JavaScript 
dans un ficliier HTIVIL. Le code JavaScript peut 
s'integrer directement dans une page HTIVIL ou 
bien etre appele dans des fichiers externes 
d'extension . js. 



Premiers pas avec ActionScript 3.0 

Le langage MXML est un langage de description, utile pour concevoir 
une interface utilisateur, par exemple. Cependant, il demeure limite 
quand il s'agit de mettre en oeuvre des processus complexes. C'est alors 
ActionScript 3.0 qui prend le relais. ActionScript est un veritable lan- 
gage de programmation, oriente objet. II est base sur I'ECMAScript 4. 
Nous avons deja decrit quelques-unes de ses specificites dans les chapi- 
tres precedents, aussi, passons directement a sa mise en oeuvre dans Flex 
Builder 3. 

II existe deux methodes pour integrer du code ActionScript dans un 
projet Flex : 

• integrer directement du code ActionScript dans un fichier MXML ; 

• inserer le code dans des fichiers independants et separes, d'extension . as. 

Nous utiliserons les deux methodes, mais nous preconisons I'utilisation 
de la seconde autant que possible, car elle est plus elegante et permet 
d'utiliser du code ActionScript a partir de n'importe quel document 
MXML — et pas uniquement a partir du document ou est il est integre. 



//, Programmation orientee objet 

La programmation orientee objet est une methode 
d'implementation dans laquelle les programmes 
sont organises sous forme de collections coopera- 
tives d'objets, dont chacun represente une ins- 
tance d'une classe quelconque, et dont toutes les 
classes sont membres d'une hierarchie de classes 
unies a travers des relations d'heritage. 



Concepts de programmation orientee objet 

Au cours des dernieres annees, le langage ActionScript a considerable- 
ment evolue. II est passe du statut de langage de script pour Flash a un 
veritable langage sophistique et oriente objet. C'est pourquoi, avant de 
coder en ActionScript 3.0, il est indispensable d'avoir bien assimile les 
fondamentaux de la programmation orientee objet. 

Pour faire simple, tout programme oriente objet met en place une separa- 
tion des taches. II specifie aussi une organisation et une reutilisation du 
code, c'est-a-dire qu'a chaque type d'objet correspond une tache specifique. 

Objet 

L'objet est le concept central en programmation orientee objet. C'est 
I'entite sur laquelle s'appuie toute I'execution d'un programme. Un objet 
occupe de la place en memoire centrale et les donnees qu'il contient 
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determinent son etat. Mais en plus de son etat, il contient toutes les 
fonctions de son comportement. 

L'ensemble des informations d'un objet est divise en deux parties : 

• une partie publique, visible et accessible en dehors de I'objet ; 

• une partie privee, invisible et inaccessible en dehors de I'objet. Ces 
informations sont neanmoins accessibles et utilisables via les fonc- 
tions integrees a I'objet. 

Classe 

Une classe definit un ensemble potentiel d'objets. Tout objet resulte, au 
moment de I'execution du programme, de I'instanciation d'une classe 
existante. Une classe est, quant a elle, une description statique, figee 
dans le programme de l'ensemble potentiel d'objets instanciables. 

ActionScript 3.0 introduit le concept de fichier de classe {class file), qui 
peut etre compris comme un programme independant contenant des 
variables (nommees properties), et des fonctions (nommees methods). 
Ces properties et methods sont necessaires pour accomplir une tache ou 
un groupe de taches specifiques. Les fichiers de classes servent done de 
base statique (sorte de moule ou template) pour instancier un objet 
(representant une copie en memoire de la classe statique). 

Heritage 

Uheritage est le concept le plus puissant en programmation orientee 
objet. C'est I'outil qui permet effectivement au programmeur d'ecrire du 
code extensible et reutilisable. Pour faire simple, I'heritage est une rela- 
tion entre differentes classes permettant de definir une nouvelle classe a 
partir des classes existantes. 

Lorsqu'un classe B herite directement ou indirectement d'une classe A, 
la classe B est dite classe descendante ou de'rtve'e de A. De meme, la classe 
A est consideree comme I'ancetre de la classe B. 

Pour expliquer concretement le principe de I'heritage entre classes, pre- 
nons I'exemple d'une classe nommee Animaux. Cette classe enregistre les 
caracteristiques (properties et methods) definies et associees a tous les 
animaux, sans prendre en compte le type ou la race. Vous souhaitez 
ensuite creer une classe derivee nommee Chi ens. En derivant cette classe 
de la classe ancetre Animaux, vous conservez toutes les caracteristiques 
intrinseques de cette derniere, et done ses properties et methods. Inutile 
alors de recoder betement ce qui a deja ete fait. Libre a vous d'etendre les 
caracteristiques de votre nouvelle classe derivee en precisant de nouvelles 
properties et methods specifiques aux chiens... 
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Paquetage 

Certains projets utilisent des centaines, voire parfois des milliers de 
classes differentes. II est done necessaire de les organiser dans des reper- 
toires independants. Cependant, les fichiers de classes doivent pouvoir 
communiquer entre eux. Alors, pour simplifier ce processus, les classes 
sont organisees et integrees dans des paquetages (packages^ . Ainsi, 
chaque classe precisera dans son code a quel package elle appartient. 

Com prendre le processus de recuperation des donnees 
avec ActionScript 

Revenons a notre etude de cas. Pour traiter la recuperation de donnees 
d'un fichier XML, nous devons done creer, en ActionScript 3.0, une 
fonction edi toHandler() qui recuperera le contenu et le stockera dans 
une variable. Pour ce faire, nous devons inserer un bloc de script encadre 
par les balises MXML <mx:Scn'pt>. A titre d'exemple, le squelette de la 
fonction ActionScript destinee a recuperer certaines donnees de I'edito 
dans le fichier XML est le suivant : 

Recuperation de donnees dans le gestionnaire d'evenements 

<mx:Scn'pt> Q 
<! [CDATA[ Q 

import mx. rpc. events .ResultEvent; Q 

private function edi toHandler(event :ResultEvent) : void Q 

{ 

} 
]]> 
</mx: Script> 

Saisissez ce bloc de script dans le fichier Edito.mxml. Nous allons expli- 
quer sa syntaxe et son fonctionnement. 

Lorsqu'une portion de code ActionScript est inseree dans un fichier 
MXML, encadree par la balise <mx:Script> Q, une section portant le 
nom CDATA s'insere automatiquement Q. Cette section est frequemment 
utilisee dans les fichiers XML afin d'isoler une partie d'un document 
pour une gestion specifique, et pour prevenir le compilateur que le con- 
tenu encadre sera analyse differemment du teste du document. En 
d'autres termes, cette section specifie du code non XML. Avec Flex, on 
utilise CDATA principalement pour aj outer du code ActionScript a un 
fichier MXML, afin d'avertir le compilateur Flex de ne pas traiter les 
instructions encadrees comme du code MXML. 

La premiere ligne d'instruction ActionScript est une instruction import. 
Elle permet d'utiliser une classe definie dans un paquetage. Ainsi, dans 
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notre exemple, nous importons la classe ResultEvent via I'mstruction 
import mx. rpc. events .ResultEvent ; Q. 

Nous allons a present utiliser le debogueur de Flex Builder afin de veri- 
fier que les donnees du fichier XML seront correctement recuperees. 
Placez done un point d'arret {breakpoint) a I'interieur de la fonction 
editoHandlerO Q en utilisant la barre de marquage de la vue Editor 
(figure 7-3). Vous pouvez soit double-cliquer sur le numero de la ligne 
de code ou vous souhaitez inserer ce point, soit utiliser le clic droit de la 
souris et selectionner Toggle Breakpoint. 
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private function editoHandler [evt : ResultEvent) : void 


{ 








Quick Fix 


Qrl+l 




H 


BlaaSlaBgiitl 


^^^^^1 




£■■■■■■■■■■■■■ 




^ Show Quick Dif f 


Ci:rl+Shifi:+Q 




^ Show Line Numbers 




bjet — > 


Bookmark. . . 




= "editoData" url="assets/edito/edito data. : 


Task. . . 




lisateur — > 


Folding 


> 




Preferences... 






27 </ nix : Canvas > 




28 









Figure 7-3 

Ajout d'un point d'arret dans le code 



Cliquez ensuite sur le bouton Debug pour executer I'application dans le 
navigateur (figure 7-4). Flex Builder stoppera a I'endroit marque par le 
point d'arret quand il le rencontrera. 

I^TV Figure 7-4 

r^ ^ — , Executer I'application en mode Debug 

iDebugMediaFootl 

L'application s'executera done dans le navigateur. Pour declencher le 
point d'arret, en executant le code integre dans le fichier Edito.mxml, 
vous devrez cliquer sur le controleur Edito de la LinkBar afin de lancer le 
composant Edito. Flex Builder vous demandera prealablement I'autori- 
sation de passer en mode Perspective afin d'ouvrir la fenetre de debogage 
(figure 7-5). 

A partir de la perspective Flex Debugging, vous pouvez double-cliquer sur 
I'onglet Variables afin de maximiser la taille de la fenetre. Nous obser- 
vons alors dans les donnees que I'evenement result contient un objet 
ArrayCol lection dans lequel sont enregistrees toutes les donnees du 
fichierXML (figure 7-6). 
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Figure 7-5 

Passage en perspective Flex Debugging 
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tf image 






"assets/edito/edito.jpg" 


i 




B <i' object 






Object (ffl>16d39f89) 


i 




tf resume 
tf titre 






"Lorem ipsum dolor sit ametj consec tetuer adipiscing elit 


Praeseni: vesiiibulum Aenean nonumm^ 








"LOREM IPSUM DOLOR SIT AMET" 




6' type 






null 






il'uid 






"C38AE442-C188-2007-F6B0-FFB7C8EFFDB4" 




B 


• [1] 






mx.utils.ObjectProxy (ffl>16dad5el) 




B 


4' source 






Array (ffl>16e71ee9) 




B 6' 


object 






Object (ffl>16d39359) 




4> 


type 






null 




4' 


uid 






"6E804E70-48F9-2F9F-49D1-FFB7991573DB" 




B 6' object 






Object (ffl>16d39fd9) 


, ^ 


<' 








.... 


-i m 


tix. col lee t ions. ArrayCo 


llection (B 16cf d841) 







Figure 7-6 L'objet ArrayCollection enregistre tout le contenu du fichier XML. 

La classe ArrayCollection est une classe wrapper (appelee parfois 
« enveloppe », litteralement « emballage ») qui expose le contenu d'un 
tableau (Array) comme une collection de donnees, mais bien plus acces- 
sible et manipulable. 

Tableau 7-2 ArrayCollection 



ArrayCollection 


Description 


Paquetage 


mx. collections 


Classe 


public class ArrayCollection 


Heritage 


ArrayCollection -> ListCollectionView ^ Proxy -> Object 


Implemente 


lExternalizable 
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En realite, les applications Flex utilisent principalement la classe 
ArrayCol lection plutot que la classe Array. Un objet ArrayCol lection 
est similaire a un objet Array (il utilise d'ailleurs la classe Array comme 
source), mais il fournit des fonctionnalites supplementaires comme la 
capacite de trier et filtrer les donnees. De plus, les objets 
ArrayCol lection sont habituellement utilises pour enregistrer des don- 
nees renvoyees par des composants d'acces aux donnees, comme HTTP- 
Service ou encore WebService et RemoteObject. 

Pour finir, les objets ArrayCol lection sont tres couramment employes, 
car ils peuvent etre lies directement a certains composants Flex, par 
exemple a un composant DataCrid (voir paragraphe suivant). De cette 
fa9on, quand une donnee est modifiee dans un objet ArrayCol lection, la 
modification est immediatement repercutee sur tous les composants lies. 



Le data binding 



Continuons a present le developpement de I'interface Edito en introdui- 
sant le principe du daia binding (ou liaison de donnees). 

Reprenons tout d'abord le code ActionScript commence dans le fichier 
Edito.mxml, puis ajoutons, apres I'importation de la classe ResultEvent, 
une variable privee que nous nommerons arrayCol lectionEdito, de 
type ArrayCol lection Q. Ce faisant, vous remarquerez que la classe 
ArrayCol lection s'importe automatiquement dans le code si vous uti- 
lisez Flex Builder. 



Creer une liaison de donnees 



Ici intervient la notion de data binding : nous devons creer une liaison de 
donnees sur la variable arrayCollectionEdi to afin que son contenu puisse 
etre ulterieurement lie a un composant du framework Flex. Ceci est pos- 
sible en utilisant la directive de metadonnee [Bindable] (qui signifie 
« liable ») positionnee juste avant la declaration de la variable a lier. 

Enfin, a I'interieur de la fonction editoHandler() , nous allons assigner 
a la variable declaree arrayCol lectionEdito le contenu de I'objet 
ArrayCol lection qui a precedemment recupere toutes les donnees inte- 
grees dans le fichier XML Q. Le code resultant de toutes ces operations 
est done le suivant : 



En SAVOIR plus Le data binding 

Le data binding est le processus d'assignation 
de donnees d'un objet a un autre objet. Vous 
pouvez done lier les donnees de deux objets 
visuels, par exemple deux champs de saisie 
Textlnput. Mais vous pouvez egalement lier 
des donnees a partir d'objets non visuels, comme 
une variable de donnee de type Array. 
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Recuperation de donnees dans le gestionnaire d'evenements 

<mx:Scn' pt> 
<! [CDATA[ 

import mx. col lections. Array Col lection ; 
import mx. rpc. events .ResultEvent ; 

[Bindable] 

private var arrayCol lectionEdito: ArrayCollection; Q 

private function edi toHandler(event :ResultEvent) : void 
{ 

arrayCol lectionEdito = event .result .edito. item; Q 

} 
]]> 
</mx: Script> 

Nous allons a present creer un objet visuel de type composant MXML 
DataCrid , afin de lui lier le contenu de la variable arrayCol lectionEdito 
de type ArrayCollection. 

Tableau 7-3 DataGrid 



DataGrid 


Description 


■ 


Paquetage 


mx. controls 


Classe 


public class DataGrid 


Heritage 


DataGrid ^ DataGridBase ^ ListBase ^ ScrollControlBase -^ 
UlComponent ^ FlexSprite ^ Sprite ^ DisplayObjectContainer ^ 
InteractiveObject ^ DisplayObject ^ EventDispatcher ^ Object 


Implemente 


IIMESupport 


Sous-classes 


FileSystemDataGrid, PrintDataGrid 



Le composant DataCrid est un objet visuel qui fonctionne comme un 
objet List, a I'exception pres qu'il peut afficher plus d'une colonne de 
donnees, ce qui le rend pratique pour afficher des objets contenant des 
proprietes multiples. 

Ce composant etant principalement utilise pour afficher des donnees, 
nous allons done affecter a la propriete dataProvider directement le 
contenu de notre variable arrayCol lectionEdito, grace au daia btnc 
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Data binding sur un DataGrid 



<! — HTTPService objet — > 
<mx:HTTPService id="editoData" 

url="assets/edito/edi to_data.xml " 

result="editoHandler (event) "/> 

<! — interface utilisateur — > 

<mx:DataGrid dataProvider="{arrayConect"ionEd"ito}" x="10" y="10"/> 

Compilez a present votre application et admirez le resultat dans le navi- 
gateur web (figure 7-7). 



AnENTION Accolades { } du data binding 

N'oubliez pas de toujours utiliser des accolades 
pour specifier la liaison de donnees entre un 
objet et un autre. Dans notre exemple, nous spe- 
cifions la liaison de donnees en affectant a la 
propriete DataProvider la variable 
« liable » {arrayCol lectionEdi to}. 



I 



MEDIA FOOT 



RICH INTERNET EXPERIENCE - SPORT MEDIA LABDRATVRY 



Figure 7-7 

Liaison entre un composant visuel DataGrid 
est une variable de type ArrayCollection 



article 


date 


image 


resume 


titi-e 


Lorem ipsum do 


samedi 29 mars 


assets/edito/edi 


Lorem ipsum do 


LOREM IPSUM D 
















^^ 


^^ 


^^ 


^^ 





Les donnees enregistrees dans notre fichier XML sont ainsi tres facile- 
ment recuperables et exploitables. 



Formats Recuperation des donnees 

Le format de recuperation des donnees par defaut 
est I'ArrayCol lection. Cependant il est pos- 
sible de recuperer les donnees dans un autre 
format, en ajustant la propriete resultFormat 
du composant HTTPService. Vous pouvez ainsi 
recuperer des donnees dans les formats suivants : 
object, xml, flasliwars, text, E4X et array. 



Mettre au point Tinterface utilisateur du composant Edito 

Revenons maintenant a I'objet de notre etude de cas. L'emploi d'un 
composant DataGrid n'est pas franchement pertinent pour I'affichage de 
notre Edito qui, rappelons-le, contient des donnees texte mais aussi un 
article relativement long, une image, une date et un titre. Nous allons 
done repenser notre interface utilisateur en y affectant les composants 
adequats, toujours via la liaison des donnees. 



Alier PLUS LOIN Gestion des erreurs 

II est possible d'integrer un evenement d'erreur 
pour localiser d'eventuels problemes lors de la 
recuperation des donnees d'un service. II suffit 
pour cela de definir la propriete fault comme 
ceci : fault="faultHandler (event) ". 



Definir les composants 

La figure 7-8 presente I'interface utilisateur (assez simple pour I'instant) 
du panneau Edito. Cinq elements visuels non interactifs sont ainsi 
definis : 

• un composant Image (pour afficher une image au format PNG) ; 

• deux composants de type Label (pour I'affichage du titre et de la 
date) ; 

• deux composants de type Text (pour le resume court et I'article au 
complet). 
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Figure 7-8 

Panneau Edito, premiere etape 




Nous devons commencer par recuperer les donnees dans des variables 
appropriees. Supprimons done la variable de type ArrayCol lection et 
declarons des variables de type String, plus en adequation avecl'objet de 
ce module Edito. Le code ActionScript resultant sera alors : 

Affectation des donnees dans des variables liees 

<!-- ActionScript - panneau edito — > 
<mx:Scri pt> 
<! [CDATA[ 

import mx. rpc. events .* ; 

[Bindable] 

private van ti treEdi to:Stri ng="loading. . . " ; 

[Bindable] 

private van dateEdi to: String="loadi ng . . . " ; 

[Bindable] 

private van resumeEdito: String="loadi ng . . . " ; 

[Bindable] 

private van articleEdi to: Stri ng="loading . . . " ; 

[Bindable] 

private van imageEdi to:Stri ng ; 

private function edi toHandler(event :ResultEvent) : void 

{ 

ti treEdi to=event.resul t .edito. iteni[0] . titre; 
dateEdi to=event . resul t . edi to . i tern [0] . date ; 
resumeEdito=event .resul t.edito.iteni[0] .resume; 
articl eEdi to=event . resul t . edi to . i tem [0] . articl e ; 
imageEdi to=event. resul t .edito. item[0] . image; 
} 
]]> 
</mx: Script> 
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Au niveau de Tinterface utilisateur MXML, nous ecrirons la portion de 
code suivante : 



Interface utilisateur, premiere etape 

<! — HTTPService objet --> 
<mx: HTTPService id="editoData" 

url="assets/edi to/edito_data.xml ' 
result="editoHandler (event) "/> 



<! — interface utilisateur — > 
<mx:Ti tleWi ndow id="ti tleWi ndowEdi to" 

width="700" height="450" layout="absol ute" 

title="EDITO" showCloseButton= "false" 

styleName="panneauStyle" 

ti tleIcon= "©Embed ( ' assets/ui/star_icon . png ' ) ' 

close="currentState= ' ' "> 

<!-- image --> 

<mx:Image id="imageEdi told" 

source="{imageEdito}" 

height="141" width="223" left="10"/> 

<!-- tit re --> 

<mx: Label id="titreEdi told" 

text="{titreEdito}" 

styleName="textWhi teBold" 

width="207" y="0" x="241"/> 

<!-- date — > 

<mx: Label id="dateEditoId" 

text="{dateEdito}" 

styleName="textWhi teSmall " 

width="207" x="241" y="28"/> 

<!-- resume — > 

<mx:Text id="resumeEdi told" 

text="{resumeEdi to}" 

styleName="textWhi teSmall " 

width="300" x="241" y="56"/> 



<!-- article --> 

<mx : Text i d= "arti cl eEdi told " 
text=" {arti cl eEdi to} " 
styleName="textWhi teSmall " 
y="162" width="650" height= 



'200" left="10"/> 



</mx:Ti tleWi ndow> 



Styliser I'interface 

Vous avez probablement remarque I'utilisation de la propriete styleName 
pour les composants de I'interface. Nous avons vu au chapitre 5 com- 
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ment utiliser les feuilles de style CSS pour personnaliser le style de nos 
composants. Le composant Edito n'echappe pas a ce ravalement de 
fa9ade, aussi plusieurs styles de composants generiques ont-ils ete 
rajoutes au fichier MediaFoot .ess dont voici le contenu mis a jour : 

Mise a jour du fichier IVJediaFootcss 

/* CSS file */ 
.textWhiteSmall 

{ 

color: #FFFFFF; 
fontSize: 11; 
fontWeight: normal; 

} 

. textlnputNormal 

{ 

color: #000000; 

} 

. Li nkButtonNormal 

{ 

cornerRadius: 0; 

} 
.textWhiteBold 

{ 

color: #FFFFFF; 
fontSize: 11; 
fontWeight: bold; 

} 

. boutonNormal 

{ 

cornerRadius: 0; 

} 

. panneauStyle 

{ 

borderStyle: "solid"; 

borderThickness: 1; 

backgroundCol or: #000000; 

backgroundAlpha: 1; 

cornerRadius: 0; 

dropShadowEnabled : true; 

fontSize: 11; 

fontWeight: bold; 

headerHeight: 24; 

textlndent: 0; 

borderColor:#FFFFFF; 

font-family: Arial; 

color: #BDE9FA; 

closeButtonDownSkin : Embed ( ' /asset s/ui/close_over. png ' ) ; 

closeButtonUpSki n : Embed ( ' /assets/ui/close_up. png ' ) ; 
} 
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Ajouter un formulaire d'inscription a une lettre 
d'informations 

Nous allons a present ajouter un formulaire de newsletter a notre pan- 
neau Edito. Ce formulaire aura ulterieurement pour fonction I'inscription 
a une lettre d'informations, mais il n'est pas encore fonctionnel en I'etat, 
car non connecte a une base de donnees. 

Nous souhaitons exploiter les capacites de Flex dans la conception 
d'interfaces riches et evoluees pour integrer ce formulaire. A cet effet, 
nous utiliserons done les etats d'affichage, effets et transitions definis 
dans le chapitre precedent. 

Creer un nouvel etat d'affichage 

Ainsi, pour integrer visuellement le formulaire, nous allons creer un etat 
d'affichage (view state) que nous nommerons abonnementState. Cet etat 
sera integre le formulaire et sera declenche par une action de I'utilisateur 
sur le bouton visible sur la figure 7-9. 

Figure 7-9 

Bouton d'acces au formulaire d'inscription a la newsletter 



Attention inscription a une newsletter 

Habituellement, le bouton d'acces a I'inscription 
a une newsletter se place sur la page d'accueil 
d'un site. 
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Les lignes de code permettant I'integration de ce bouton dans le pan- 
neau i.d\to seront done les suivantes : 

Creation du bouton d'acces au formulaire 



:l — bouton abonnement newsletter--> 
<mx: Button id=" abonnement Buttonid" 
x="474" y="2" 

label="Abonnement newsletter I" 
cl icl<="currentState= ' abonnementState ' " 
styleName="boutonNormal "/> 

Vous noterez que I'evenement cl i ck est utilise pour declencher le pas- 
sage de I'etat courant vers le nouvel etat abonnementState. Nous confec- 
tionnerons done notre formulaire a I'interieur de ce vieiD state. 

Rappelons que la procedure de creation d'un etat d'affichage est possible 
en mode Design ou alors en codant directement en MXML, comme suit : 

Creation d'un nouveau view state 

<l — View states--> 
<mx: states> 

<mx : State name="abonnementState"> 

</mx: State> 
</mx: states> 
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Le SAVIEZ-VOUS ? Liaison des composants 
dans les etats d'affichage 

Nous utilisions deja la liaison de donnees lors de la 
manipulation des etats d'affichage au chapitre pre- 
cedent, comme le demontrent les accolades { } 
assurant la liaison entre les composants a modifier 
et le nouvel etat. 



Figure 7-10 

Deuxieme etat d'affichage 



Avant d'inserer notre formulaire, nous souhaitons supprimer le bouton 
d'abonnement et decaler le contenu de I'edito (image, titre, date et blocs 
de texte) vers le bas afin de liberer I'espace necessaire, sans supprimer 
I'affichage de I'edito. Les instructions a saisir sont les suivantes : 

Modification des composants existants dans le nouveau view state 



< I --View states-- 
<mx: states> 

<mx: State name= 



'abonnementState"> 



-I . 



supprimer le bouton Abonnement 



<mx: RemoveChi 1 d target=" {abonnementButtonId} "/> 
<l — ajuster la nouvelle ordonnee de 1 'article - 
<mx: SetProperty target="{articleEdi told}" 
name="y" val ue="400"/> 



-I . 



ajuster la nouvelle ordonnee de 1 'image — > 



<mx: SetProperty target="{imageEdi told}" 

name="y" val ue="241"/> 
<l — ajuster la nouvelle ordonnee du titre --> 
<mx: SetProperty target="{ti treEdi told}" 

name="y" val ue="241"/> 
<l — ajuster la nouvelle ordonnee de la date — > 
<mx: SetProperty target="{dateEdi told}" 

name="y" val ue="269"/> 
<l — ajuster la nouvelle ordonnee du resume --> 
<mx: SetProperty target="{resumeEditoId}" 

name="y" val ue="297"/> 
</mx:State> 
</mx: states> 

Compilez et observez le resultat apres avoir presse le bouton d'abonne- 
ment (figure 7-10). 
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Definir un second etat permet de deplacer proprement nos composants 
vers le bas. Nous pouvons a present ajouter les nouveaux composants 
constituant le formulaire. 

Creer le formulaire 

Ce formulaire sera done cree directement dans le nouvel etat d'affichage. 
II existe plusieurs methodes pour coder un formulaire en MXML. La 
plus simple consisterait a utiliser le conteneur Form, qui permet de con- 
troler la mise en page d'un formulaire standard. Cependant, nous proce- 
derons differemment en utilisant a la place un composant TitleWindow 
integrant les composants constituant le formulaire (Label, Textlnput, 
CheckBox et Button). 

Le code a inserer dans le view state, entre les balises AddChild, est le 
suivant : 



Creation du formulaire 

<mx : AddChi 1 d rel ati veTo= " {ti tl eWi ndowEdi to} " 

posi tion="lastChi ld"> 

<mx : Ti tl eWi ndow i d=" abonnementBoxId " 
styleName="panneauStyle" 

x="10" y="10" width="640" height="190" layout="absolute" 
title="ABONNEMENT NEWSLETTER" showCloseButton="true" 
titleIcon="®Embed( ' assets/ui/star_icon . png ' ) " 
close="currentState= ' '" left="10"> 

<!-- premier bloc — > 

<mx: Label text="Prenom" x="10" y="10" 

styleName="textWhiteBold"/> 
<mx: Label text="Nom" x="10" y="35" 

styleName="textWhiteBold"/> 
<mx: Label text="Email" x="10" y="60" 

styleName="textWhiteBold"/> 
<mx: Label text="Confi rmation email" x="10" y="85" 

width="113" styleName="textWhiteBold"/> 
<mx:TextInput id="prenomId" x="131" y="10" 

styleName="textInputNormal "/> 
<mx:TextInput id="nomId" x="131" y="35" 

styleName="textInputNormal "/> 
<mx:TextInput id="mailld" x="131" y="60" 

styleName="textInputNormal "/> 
<mx:TextInput id="confMai lid" x="131" y="85" 

styleName="textInputNormal "/> 
<mx: Label x="0" y="124" width="291" 

id="bindingTxt" text="{prenoniId.text} {nomld.text} 
{mailId.text}"/> 

<!-- second bloc --> 

<mx: Label x="350" y="10" text="Adresse" 
styleName="textWhiteSmal 1 "/> 
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<mx: Label x="350" y="35" text="Ville" 

styleName="textWhi teSmall "/> 
<mx: Label x="350" y="60" text="Code Postal" 

styleName="textWhi teSmall "/> 
<mx: Label x="350" y="85" text="Telephone" 

sty leName="textWhi teSmall "/> 
<mx:TextInput id="adresseld" x="420" y="10" 

styleName="textInputNormal "/> 
<mx:TextInput id="villeld" x="420" y="35" 

styleName="textInputNormal "/> 
<mx:TextInput id="cpld" x="420" y="60" 

styleName="textInputNormal "/> 
<mx:TextInput id="telld" x="420" y="85" 

styleName="textInputNormal "/> 
<mx:CheckBox x="350" y="118" label="validation" 

width="90"/> 
<mx: Button x="482" y="118" label="Abonnement" 

click= "cur rents tate= ' ' " styleName="boutonNormal "/> 
</mx : Ti tl eWi ndow> 
</mx:AddChild> 

Notez rinstruction suivante : 

<mx:Label x="0" y="124" width="291" id="bindi ngTxt" 
text="{prenoniId.text} {nomld.text} {mail Id. text} "/> 

Cette instruction utilise le principe de liaison de donnees pour connecter 
le composant Label identifie sous bindi ngTxt avec trois autres 
composants : Textlnputprenomld . text, nomld.text et mailld.text. En 
effet, si vous saisissez du texte dans I'un de ces trois Textlnput, le texte 
sera automatiquement reporte dans le composant bindi ngTxt. 

Un composant Textlnput est un champ de texte editable sur une ligne. 



Tableau 7-4 Textlnput 



Textlnput Description 


Paquetage 


mx. controls 


Classe 


public class Textlnput 


Heritage 


Textlnput -> UlComponent -> FlexSprite ^ Sprite ^ 
DisplayObjectContainer ^ InteractiveObject ^ DisplayObject ^ 
EventDispatcher ^ Object 


Outils 


IDataRenderer, IDroplnListltemRenderer, IFocusManagerComponent, 
IIMESupport, IListltemRenderer, IFontContextComponent 



Un composant CheckBox est constitue d'une petite case a cocher et d'une 
etiquette optionnelle. 
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Tableau 7-5 CheckBox 



CheckBox 


Description 


Paquetage 


mx.controls 


Classe 


public class CheckBox 


Heritage 


CheckBox ^ Button ^ UlComponent ^ FlexSprite ^ Sprite -^ 
DisplayObjectContainer ^ InteractiveObject ^ DisplayObject ^ 
EventDispatcher ^ Object 



Compilez et observez le resultat (figure 7-11). 



MEDIA FOOT 



MCHINTEItlfET EXPEDIENCE - SPDRT MEDIA UBOMTORY 




Figure 7-11 

Integration du formulaire 
dans le second View state 



Fluidifier la permutation d'etats 

Lors de la permutation entre deux etats d'affichage, le basculement est 
toujours un peu rude et n'aide pas a la comprehension visuelle du chan- 
gement d'etat. II est necessaire d'ameliorer I'experience utilisateur pour 
ce processus. Cette problematique a ete soulevee au chapitre precedent. 
Nous allons ainsi integrer deux effets de transition : 

• le premier consistera en un fondu transparent sur le formulaire pour 
le faire apparaitre ; 

• le second sera un deplacement du bloc d'edito vers le bas. 

Les deux effets seront simultanes et necessiteront done I'utilisation de la 
balise Parallel. Les transitions peuvent done se coder sous la forme 
suivante : 
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Transitions lors du basculement d'un View state a I'autre 



< ! --Transi tions--> 
<mx: transi tions> 

<mx:Transition f romState="*" toState="*"> 
<mx: Paral lel> 

<mx:Fade duration="1000" 

target="{abonnementBoxId}"/> 
<mx:Move duration="1000" 

targets="{[imageEdi told, titreEdi told , 
dateEditoId, resumeEdi told , articleEditoId]}"/> 
</mx: Paral 1 el > 
</mx :Transi ti on> 
</mx: transi tions> 



Ajouter un effet d'introduction 

Pour enrichir encore I'experience utilisateur, nous pouvons integrer un 
effet de type WipeDown (composant qui s'etend vers le bas) afin d'affi- 
cher progressivement le contenu lors du chargement d'une nouvelle 
page. La page apparaitra ainsi moins brutalement pendant la navigation. 

Cet effet peut facilement etre appele en inserant dans la balise principale 
de chaque composant personnalise I'instruction suivante : 
showEffect="{wi peDownEffectId}" . La propriete showEffect appellera 
I'effet lie que nous avons arbitrairement nomme wi peDownEffectId , 
dont le code sera le suivant : 

Effet d'introduction d'une page 

<!--Effects--> 

<mx:WipeDown id="wi peDownEffectId" duration="1000"/> 

Cet effet sera systematiquement integre dans toutes nos pages MXML 
(fichier Home.mxml inclus). 



Modifier la page d'accueil 

Pour terminer la conception de notre premier module Edito, nous allons 
maintenant appliquer les differentes notions etudiees dans ce chapitre au 
panneau Edito de la page Home.mxml afin d'obtenir le visuel represents sur 
les figures 7-12 et 7-13. 

Le deploiement du panneau Edito de la page d'accueil, programme au 
chapitre precedent, permet done de disposer d'un espace supplementaire 
pour I'insertion de contenu textuel et graphique. 
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Figure 7-12 

Modification du panneau Edito de la page d'accueil 



LOHEM IP5UNI DOLOR SIT AMET 






Lorem ipsum dolor sit amet, consec tetuer adif 
nonummy hendrerit mauris. Pha sellus porta. F 
natoque penatibus et magnis dis parturient mo 
ipsum dolor sit amet, consec tetuer adipiscing 



ik' CALENDHIEH 



Figure 7-13 

Panneau Edito deploye 



Nous allons utiliser une nouvelle fois le principe de la recuperation de 
donnees dans notre fichier XML via un service HTTPService. Le code 
resultant de cette operation sera done le suivant, a integrer dans le fichier 
Home.mxml : 

Appel de la procedure de recuperation des donnees (ballse Canvas) 

creationComplete="editoData. send() " 



117 



Recuperation et affichage des donnees 



<!-- Script recuperation de donnees fichier XML --> 
<mx:Scri pt> 
<! [CDATA[ 

import mx. rpc. events .* ; 

[Bindable] 

private var ti treEdi to:Stri ng="loading. . . " ; 

[Bindable] 

private var dateEdi to: String="loadi ng . . . " ; 

[Bindable] 

private var resumeEdito: String="loadi ng . . . " ; 

[Bindable] 

private var articleEdi to: Stri ng="loading . . . " ; 

[Bindable] 

private var imageEdi to:Stri ng ; 

private function edi toHandler(event :ResultEvent) : void 

{ 

ti treEdi to=event. result .edi to. item[0] . tit re; 
dateEdi to=event. result. edi to. i tern [0] .date; 
resumeEdito=event . result. edi to. item [0] . resume; 
articleEdi to=event. result .edi to. i tem[0] . article; 
imageEdi to=event. result .edi to. item[0] . image; 
} 
]]> 
</mx: Script> 

<!-- HTTPService objet — > 
<mx : HTTPSe rvi ce i d= " edi toData" 

url = "assets/edito/edi to_data.xml " 

resul t=" edi toHandler (event) "/> 



• I . 



panneau Edi to 



"0"> 



<mx:VBox id="vBoxEdito" 

width="478" height="189" y="38" x= 
<mx:Ti tleWi ndow id="wi ndowEdi to" 

width="100%" height="100%" layout="absol ute" 

title="EDITO" 

showCloseButton="true" 

sty] eName=" panneauStyl e" 

ti tleIcon="®Embed(' assets/ui/star_icon. png ' ) "> 

<mx:Image x="10" y="0" height="141" width="223" 

sou rce=" {imageEdi to}" id="imagel"/> 
<mx: Label x="241" y="-5" color="#FFFFFF" 

fontWeight="bold" width="207" styleName="ti tleModule" 

text="{ti treEdi to}" id="label 3"/> 
<mx: Label x="241" y="16" color="#FFFFFF" width="207" 

sty leName="ti tleModule" text=" {dateEdi to}" 

fontSize="10" id="label 2"/> 
<mx:Text x="241" y="44" width="205" 

styleName="textWhi teSmall " text="{ resumeEdito}" 

id="textl"/> 
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<mx: Li nkButton id="li nkButtonEdito" 
label="+ en savoi r plus" 
click="currentState=' edi to_open_state ' " 
n'ght="10" bottom="5" fontWeight="normal ' 
styleName="Li nkButtonNormal "/> 
</inx:Ti tleWi ndow> 
</mx:VBox> 



En resume 

Ce chapitre nous a permis d'introduire des concepts importants comme 
la liaison et la recuperation de donnees XML via un objet HTTPService. 
Vous serez probablement amene a utiliser regulierement ces deux techni- 
ques dans tous vos projets RIA avec Flex. 

Concernant la programmation orientee objet avec le langage 
ActionScript 3.0, nous n'avons fait qu'ebaucher les capacites de ce lan- 
gage. Dans le chapitre suivant, nous irons encore plus loin dans I'utilisa- 
tion de ce langage, en ameliorant I'experience utilisateur de notre 
interface de page d'accueil. L'objectif sera de pouvoir deplacer nos diffe- 
rents panneaux sur la scene et les redimensionner en toute liberte, ce qui 
est habituellement impossible dans le cadre du developpement d'un site 
conventionnel. 
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ActionScript 3 
ou I'art d'ecouter 



La version 3.0 d'ActionScript bouleverse completement 
la fafon d'apprehender la programmation ActionScript, 
car elle est entierement pensee et confue pour developper 
en oriente objet. Approfondissons notre connaissance 
de ce langage en modifiant les caracteristiques des panneaux 
de la page d'accueil. Vous apprendrez ainsi a « ecouter » 
votre application. . . 
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Attention importation des paquetages 

Avec Flex, il est obligatoire d'importer preala- 
blement le paquetage qui contient les classes 
que vous desirez utiliser. Cependant, si vous uti- 
lisez le langage ActionScript 3 avec Flash CS3 
ou CS4, il ne sera pas utile de les importer car 
elles le sont toutes implicitement par defaut. 



Le terme ActionScript se rapporte en realite a deux entites distinctes : 

• il designe d'abord I'API (interface de programmation) du lecteur 
Flash ; c'est ici que sont decrites les fonctionnalites du lecteur Flash ; 

• il designe aussi le coeur du langage base sur la specification ECMA- 
Script issue de la specification ECMAScript 4. 

Afin d'approfondir notre comprehension du langage, explorons rapide- 
ment I'API le constituant. Comme nous I'avons vu au chapitre 7, les 
fonctionnalites du lecteur Flash sont enregistrees dans des paquetages 
{packages) , dont voici la liste : 



Tableau 8-1 API du lecteur Flash 



Paquetage 


Description 


flash. accessibility 


Le paquetage f 1 ash . accessi bi 1 i ty contient des classes qui permettent de prendre en charge I'accessibi- 
lite du contenu et des applications Flash. 


flash. data 


Disponible avec AIR uniquement. 

Le paquetage f 1 ash . data contient des classes utiles pour travailler avec Adobe AIR et les bases de donnees 
SQL en local. Adobe AIR inclut un moteur de base de donnees SQL qui prend en charge la creation et I'utilisation 
de bases de donnees locales a partir d'applications de bureau AIR. 


flash. desktop 


Disponible avec AIR uniquement. 

Le paquetage f 1 ash . desktop contient des classes dediees aux operations de copier-coller et glisser-deposer, 

utiles aussi pour la classe Icon employee pour definir les icones systeme d'un fichier. 


flash. display 


Le paquetage f 1 ash . di spl ay regroupe les classes essentielles que Flash Player utilise pour creer des affi- 
chages visuels. 


flash. errors 


Le paquetage flash, errors regroupe des classes d'erreur qui font partie de I'API de Flash Player etnon pas 
du langage ActionScript de base. 


flash. events 


flasli. events prend en charge le nouveau modele d'evenements DOM et inclut la classe de 
base EventDispatcher. 


flash. external 


Le paquetage f 1 ash . external contient la classe External Interface qui permet de communiquer avec 
le conteneur de Flash Player. 


flash. filesystem 


Disponible avec AIR uniquement. 

Le paquetage f 1 ash . f i 1 esystem contient des classes utilisable dans le systeme de fichier. 


flash. filters 


Le paquetage f 1 ash . f i 1 ters contient des classes pour les effets de filtrage de bitmaps. Les filtres permet- 
tent d'appliquer des effets visuels riches, tels que les effets de flou, biseau, rayonnement et ombres portees pour 
afficher des objets. 


flash.geom 


flash.geoni contient des classes geometriques, telles que les points, les rectangles et les 
matrices de transformation, pour prendre en charge la classe BitmapData et la fonctionnalite 
d'interception de bitmaps. 


flash.html 


Disponible avec AIR uniquement. 

Le paquetage f 1 ash . html contient des classes utilisees pour integrer du contenu HTML dans une application 

AIR. 


flash. media 


Le paquetage f 1 ash . medi a contient des classes permettant de manipuler des ressources multimedia, telles 
que des sons et des videos. II comporte egalement les classes video et audio disponibles dans Flash Media 
Server. 



122 



Tableau 8-1 API du lecteur Flash (suite) 



Paquetage 


Description * 


flash. net 


Le paquetage f 1 ash . net contient des classes permettant d'envoyer et de recevoir des donnees a partir du 
reseau, comme a I'aide du telechargement d'URL et Flash Remoting. 


flash, pri nti ng 


Le paquetage f 1 ash . p ri nti ng contient des classes permettant d'imprimer le contenu Flash. 


flash. profiler 


Le paquetage f 1 ash . prof i 1 er contient des fonctions qui permettent de deboguer et tester le code Action- 
Script. 


flash. sampler 


Le paquetage f 1 ash . sampl er contient des methodes et des classes pour tracer les appels de procedures afin 
de profiler I'utllisation en memoire et optimiser les applications. 


flash. security 


Disponible avec AIR uniquement. 

Le paquetage f 1 ash . securi ty contient des classes pour valider des signatures XML. 


flash. system 


Le paquetage f 1 ash . system contient des classes permettant d'acceder aux fonctionnalites de niveau sys- 
teme, telles que la securite, le nettoyage, etc. 


flash. text 


Le paquetage f 1 ash . text contient des classes permettant de manipuler des champs de texte, de mettre du 
texte en forme, de modifier les dimensions du texte, d'appliquer des feuilles de style et des mises en page. 
L'anti-aliasing (ou anticrenelage) avance est disponible uniquement a partir de Flash Player 8 via les classes 
flash. text.TextFormat et flash. text.TextRenderer. 


flash, ui 


Le paquetage f 1 ash . ui contient des classes d'interface utilisateur, telles que les classes permettant d'intera- 
gir avec la souris et le clavier 


flash. uti Is 


Le paquetage f 1 ash . uti 1 s contient des classes d'utilitaires, telles que des structures de donnees comme 
ByteArray. 


flash.xml 


Le paquetage f 1 ash . xml contient la prise en charge de I'ancien code XML de Flash Player et d'autres fonc- 
tionnalites XML propres a Flash Player 



Vous noterez qu'il manque a ce tableau les paquetages dedies a Flex. 

Pour notre etude de cas, nous preterons une attention toute particuliere 
aux paquetages flash, events et flash.geom. Le paquetage flash, events 
nous permettra notamment d'utiliser le mecanisme de propagation evene- 
mentielle de Flex qui, vous le comprendrez rapidement, est une notion 
essentielle dans le cadre du developpement d'une application RIA. 



f 



Liberez les panneaux ! 



Dans une application classique Web 1.0, les feuilles de style CSS per- 
mettent de creer aisement une interface utilisateur sous forme de pan- 
neaux, identique visuellement a I'interface que nous avons con9ue dans 
les chapitres precedents (figure 8-1). 

Bien qu'elle ait ete con9ue avec un environnement de developpement 
RIA, I'apparence et I'ergonomie (ce qu'on appelle couramment le look 
and feet) de notre application sont relativement conventionnelles de par 
le principe d'agencement de panneaux. 



< 
I 
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MEDIA FOOT RICH INTERNET EXPERIENCE - SPORT MEDIA LABORATORY 



X j4- match live X 



Figure 8-1 

Apparence et ergonomie actuelles 
de notre etude de cas 




^ CLASSEMBIT X 



A SDI 

SDI {Single Document Interface) designe une 
methode d'organisation de I'interface graphique 
d'une application multi-fenetre. L'application se 
decompose en une ou plusieurs fenetres gerees 
individuellement par le systeme d'exploitation. Le 
mode SDI est different du mode MDI (Multiple 
Document Interface). 



Avec Flex, il est cependant aise d'ameliorer I'experience utilisateur en 
permettant de deplacer librement ces panneaux, un peu comme pourrait 
le faire I'utilisateur d'un logiciel de bureau a fenetrage SDI ou MDI. 

Dans une application RIA con9ue suivant ce principe, I'internaute pour- 
rait done deplacer librement ces panneaux et les disposer a I'emplace- 
ment voulu, ce qui lui permettrait d'organiser comme il le souhaite son 
interface visuelle sans aucune contrainte (figure 8-2). Ce principe revo- 
lutionne le concept de la page classique HTML figee. 



MDI 



Le mode MDI [Multiple Document Interface) 
designe I'organisation de I'interface graphique 
d'une application ou des fenetres « parents » con- 
tiennent en leur sein des fenetres « enfants ». 



Comment effectuer les deplacements 

Un panneau peut se deplacer en selectionnant son en-tete avec le curseur 
de la souris puis en le glissant-deposant a I'endroit desire (figure 8-3). 

Pour aider visuellement le deplacement, il serait interessant de diminuer 
la valeur de la couche alpha du panneau selectionne pendant le pro- 
cessus, de maniere a creer un effet de transparence sur le panneau 
(figure 8-3). II pourrait egalement etre pertinent d'augmenter la visibi- 
lite de I'en-tete des panneaux, afin de faciliter leur selection, d'une part, 
et d'inciter I'utilisateur a les selectionner intuitivement, d'autre part. 
Nous pourrions par exemple creer un leger effet degrade et bombe sur 
I'en-tete (figure 8-4). 
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Figure 8-2 

Nouvelle organisation de I'interface utilisateur 





Figure 8-3 

Deplacement d'un panneau 



Figure 8-4 

IVIodification de I'en-tete des panneaux 



Modifier le style de I'en-tete 

Commenfons done par I'etape la plus simple : la modification du style 
de I'en-tete de nos panneaux. Rappelons que le style graphique des pan- 
neaux a ete defini dans la feuille de style CSS, a savoir le fichier 
MediaFoot .CSS. 
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Nous utiliserons la propriete de style headerColors, dont les caracteris- 
tiques permettent d'atteindre le but recherche. En effet, cette propriete 
definit un tableau de deux couleurs utilisees pour dessiner I'en-tete. La 
premiere couleur est celle du sommet. La seconde est la couleur infe- 
rieure, celle du bas de I'en-tete. En definissant deux couleurs differentes, 
vous creez ainsi un degrade, ce qui produit toujours cet aspect bombe 
que nous trouvons regulierement dans le design de nombreux logiciels a 
interface de bureau. 

Le code CSS a integrer dans la section panneauStyle est done le 
suivant : 

headerColors:#000000, #111111; 

Compilez et observez le resultat. S'il est different de celui observe sur la 
figure 8-4, prenez un cafe, detendez-vous et recommencez. La suite de 
I'aventure s'annonce passionnante, puisque nous allons apprendre main- 
tenant a « ecouter » notre application Flex... Vaste programme ! 



En SAVOIR plus Modele evenementiel 
en ActionScript 3 

En ActionScript 3, le modele evenementiel est tire 
d'un modele de conception appele « Observateur » 
(Observer Design Pattern). 



Creez Tevenement grace a Tobjet Event 

Afin de mettre en oeuvre la fonctionnalite desiree, precisons d'abord 
quelques fondamentaux concernant le principe de propagation evene- 
mentielle. En effet, toute application Flex sera principalement definie 
par ses reactions aux differents evenements qui pourront survenir. Pour 
faire simple, chaque interaction peut produire un evenement. Par 
exemple, un clic de souris sur un panneau constituera un « evenement » 
et le programme devra le gerer en declenchant un processus predefini. 

L'objet Event est automatiquement instancie pour tout evenement Flex. 
Ainsi, vous avez deja utilise cet objet Event sans trop saisir le modele 
evenementiel fonctionnant en arriere-plan. Par exemple, a chaque per- 
mutation entre deux etats d'affichage, lorsque I'utilisateur clique sur un 
Button ou LinkButton pour activer cette permutation, nous utilisons 
cette interaction utilisateur pour declencher un evenement. C'est le cas 
dans I'exemple ci-dessous, dans lequel nous declenchions la permutation 
vers un etat faisant apparaitre notre formulaire d'abonnement : 

Script du bouton d'abonnement a la newsletter 

<mx: Button id="abonnementButtonId" 
x="474" y="2" 

label="Abonnement newsletter I" 
cl ick="currentState= ' abonnementState ' " 

styleName="boutonNormal "/> 
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Nous utilisions alors un bouton et I'attribut cl i ck directement integre 
dans la balise <mx: Button> pour definir un objet Event. Cette methode 
porte le nom « d'evenement inline » (c'est-a-dire inclus directement dans 
le code). C'est la methode la plus simple a mettre en oeuvre, car elle 
permet d'utiliser un grand nombre d'evenements en n'ajustant qu'une 
seule propriete d'un composant MXML. 

L'objet Event defini est un type issu de la classe MouseEvent, integre dans 
le paquetage flash .events. 

Tableau 8-2 MouseEvent 



^^pseEvent 


Description 


Paquetage 


flash.events 


Classe 


public class MouseEvent 


Heritage 


MouseEvent ^ Event ^ Object 


Implemente 


AutomationDragEvent, ChartEvent, ChartltemEvent, DragEvent, 
FlexMouseEvent, LegendMouseEvent, NativeDragEvent, 
ScreenMouseEvent 



Flex distribue des objets MouseEvent dans le flux d'evenements a chaque 
evenement cree par la souris. Mais les evenements ne sont pas seulement 
declenches via des interactions utilisateurs (souris ou clavier). lis peuvent 
etre egalement mis en oeuvre via des interactions systeme : I'attribut 
creationComplete, par exemple, que nous avons integre dans la balise 
<mx:Canvas> de la page Edito.mxml, declenche la fonction 
editoData. send(). 

Canvas de la page Edito.mxml 

<?xml version="l. 0" encoding="utf-8"?> 
<mx: Canvas xml ns :mx="http://www. adobe.com/2006/mxml " 
width="100%" 
backgroundAlpha="0.0" height="450" 
showEffect="{wipeDownEffectId}" 
creationComplete="editoData. send()"> 

En realite, creationComplete fait partie d'une liste d'evenements generi- 
ques utiles a connaitre et dont voici les plus incontournables : 

Tableau 8-3 Evenements generiques 



Attribut 


Description 


change 


Cet evenement peut etre declenche a chaque modification d'un composant. 


click 


Se declenche quand un utilisateur clique sur un composant. Par exemple, si I'utilisateur clique sur un bouton puis relache 
le die sur le meme bouton, I'evenement click est lance. 
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Tableau 8-3 Evenements generiques (suite) 



Attribut 


Description J 


creati onCompl ete 


Cet evenement est declenche quand un composant et tous ses enfants sont crees. II est pratique pour gerer le processus 
d'initialisation. Dans notre exemple ci-dessus, il est declenche quand le Canvas complet de la page Edi to . mxml est 
integralement cree. 


error 


Cet evenement est declenche pour recuperer et traiter les eventuelles erreurs lors d'un processus. 


inouseDown 


S'execute quand I'utilisateur presse le bouton de la souris sur un composant. 


mouseUp 


S'execute quand I'utilisateur relache la pression du bouton de la souris sur un composant. 


resize 


S'execute quand I'application est redimensionnee a cause d'un changement de la taille du navigateur ou de la fenetre. 


rol lOver 


S'execute quand le pointeur de la souris survole la zone d'un composant. 


rollout 


S'execute quand le pointeur de la souris se retire de la zone d'un composant. 


scroll 


Cet evenement est declenche a chaque defilement {scroll) de la souris. 



A chaque fois qu'un evenement est genere dans votre application, un objet 
Event est cree. II est toujours specifique a I'evenement. Chaque evenement 
est une instance de la classe Event du framework Flex (ou bien de I'une de 
ses sous-classes, comme nous I'avons vu pour MouseEvent). L'objet Event 
enregistre des infr)rmations concernant I'evenement specifique, ce qui 
signifie que si certaines proprietes sont communes et standards a tous les 
autres types d'evenements, d'autres ne sont propres qu'a cet evenement en 
particulier. 

Un monde parfaitement evenementiel 

La classe permettant a un objet de diffriser des evenements est la classe 
EventDi spatcher. C'est une classe centrale et unique. Tous les objets heritent 
de cette classe, ce qui leur permet de pouvoir tous diffriser des evenements. En 
efifet, avec ActionScript 3, la classe EventDi spatcher herite desormais direc- 
tement de la classe Object et tous les autres objets heritent ensuite de cette 
classe EventDi spatcher. lis beneficient done de la diffiision d'evenements en 
natif, c'est-a-dire qu'Us ont tous la capacite de diffiiser des evenements. 

Tableau 8-4 EventDispatcher 



EventDispatcher 


Description 1 


Paquetage 


flash. events 


Classe 


public class EventDispatcher 


Heritage 


EventDispatcher -> Object 


Implemente 


lEventDispatcher 


Sous-classes 


Animator, Camera, ContextMenu, ContextMenultem, DataProvider, DisplayObject, FileReference, FileReferenceList, IME, 
Loaderlnfo, LocalConnection, Locale, Microphone, NetConnection, NetStream, PrintJob, RadioButtonGroup, SharedObject, 
Socket, Sound, SoundChannel, Stylesheet, Timer, Transition, TransitionManager, Tween, URLLoader, URLStream, XMLSocket 
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Par consequent, tous les objets peuvent utiliser la methode 
addEventListenerO , qui permet d'ecouter un evenement specifique et 
de declencher, le cas echeant, un processus associe. Le fonctionnement 
decrit ici reprend le principe du modele de conception « Observateur », 
sur lequel se base le modele evenementiel de Flash. Dans ce design pat- 
tern, nous avons trois acteurs principaux : le sujet, I'evenenient et I'ecou- 
teur. Par exemple, si le sujet est un composant de type bouton, 
I'evenement sera done un clic sur ce bouton et I'ecouteur la methode 
addEventListenerO, qui declenchera un processus specifique (comme 
pour notre permutation vers un nouvel etat d'affichage sur la figure 8-5). 



< 

CO 



1 - le sujet (bouton) 



1 



2 - I'§v6nement (clic sur le bouton) 

3 - I'ecouteur : addEventLlstener( ) 




processus sp^lfique : permutation View state 



Figure 8-5 

Modele evenementiel dans Flex 



Comprendre la propagation evenementiel le 

Reprenons a present I'exemple d'un evenement de type click. Jusqu'a pre- 
sent, nous avons place des evenements tels que celui-ci sur des composants 
qui depechent eux-memes I'evenement (c'est a partir de ce composant que 
I'element est declenche). C'est le cas par exemple du clic sur le bouton d'ins- 
cription a la newsletter, dans le chapitre precedent, qui comporte I'instruc- 
tion click="currentState=' abonnementState ' " (fichier Edito.mxml). 

Cependant, il est parfois plus pratique de placer un evenement sur le parent 
d'un objet plutot que sur I'objet lui-meme. Par exemple, nous pourrions 
placer cet evenement sur le conteneur parent Ti tl eWi ndow qui contient pre- 
cisement le bouton. Nous pourrions de la meme fa9on remonter encore 
d'un cran et le placer sur le conteneur Canvas , qui est parent du 
TitleWindow, voire encore plus en amont, sur le conteneur Application, 
qui contient lui-meme le conteneur Canvas du fichier Edi to . xml . 
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II est important de comprendre le mecanisme de propagation d'evene- 
ment du framework Flex. Vous pouvez en effet choisir de gerer un eve- 
nement sur I'objet de diffusion lui-meme (le bouton) ou sur n'importe 
lequel de ses conteneurs parents (TitleWindow -> Canvas -> Application). 

C'est pourquoi le mecanisme de propagation evenementielle de Flex se 
decompose en trois phases : 

1 une phase de capture ; 

2 une phase de ciblage ; 

3 une phase de remontee. 

Examinons a present un peu plus en detail ces trois phases, qui sont 
ensuite modelisees sur la figure 8-6. 



En SAVOIR plus Objet cible (noeud cible) 

Dans ce mecanisme de propagation evenemen- 
tielle, I'objet cible (ou noeud cible) designe tou- 
jours I'objet qui propage I'evenement (done, dans 
notre exemple, le bouton). 



En SAVOIR PLUS Objet currentTarget 

Pendant la phase de capture. Flex va verifier tous 
les conteneurs (ou noeuds) places en amont de 
I'objet cible, en partant du plus haut. En descen- 
dant, il va controler tous les conteneurs en com- 
mengant par le conteneur Application. A 
chaque etape de la phase de capture, Flex va 
definir un objet currentTarget qui est done 
I'objet en cours d'examen. A ne pas confondre 
avec I'objet cible. 



Exemple Phase de ciblage 

Pendant cette phase, notre bouton (pour garder 
cet exemple) est done a la fois I'objet/noeud cible 
et I'objet currentTarget en cours d'examen. 



La phase de capture 

La premiere phase de la propagation evenementielle est done la phase de 
capture (^capturing phase, en anglais). Lorsqu'un evenement se declenche, 
Flex le diffuse en partant du conteneur le plus en amont (Application) 
pour redescendre jusqu'au parent direct de I'objet auteur de la propaga- 
tion (le bouton, dans notre exemple). 

Ainsi, avant d'en arriver a I'objet cible (le bouton), I'application va con- 
troler d'abord tous les conteneurs parents, en amont (TitleWindow -> 
Canvas -> Application), et ainsi verifier qu'Us ne proposent pas d'ecou- 
teurs {listeners) pour cette premiere phase. En d'autres mots, le premier 
controleur Appl i cati on sera verifie en premier, puis ce sera le tour du con- 
teneur Canvas, puis du conteneur TitleWindow et, en dernier, si aucun 
ecouteur specifique n'a ete positionne auparavant, ce sera le bouton. 

Ce mecanisme permet de capturer I'evenement durant sa descente et de 
stopper sa propagation si necessaire. 

La phase de ciblage 

La seconde phase porte le nom de phase de ciblage {targeting phase, en 
anglais). En realite, nous la connaissons deja. C'est en effet lors de cette 
etape que I'application initialise I'objet Event, verifie si une fonction est 
associee ou non a I'evenement et la declenche si besoin. La phase de 
ciblage intervient done quand I'evenement a fini de parcourir tous les 
objets parents et lorsqu'il a atteint I'objet ayant provoque la propagation 
(I'objet cible). 



La phase de remontee 

Quand la phase dite de « ciblage » est terminee. Flex va propager I'eve- 
nement dans le sens oppose a celui de la phase de capture. Cette phase 
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est appelee phase de remontee {bubbling phase) : revenement remonte les 
conteneurs en sens inverse jusqu'au composant Application, afin de 
declencher les ecouteurs qui lui sont associes. 

La figure 8-6 presente la modelisation de ces trois phases. 



/^ 



PHASE 1 
CAPTURE 



< 



\. 




y,~ PHASE 3 



Clind'sil La petite bulle qui remonte... 

Le parcours de revenement durant cette phase 
s'apparente a celui d'une bulle remontant a la sur- 
face de I'eau. C'est pour cette raison que cette 
phase est appelee bubbling phase en anglais. 



W3C Propagation evenementielie 

Ce mecanisme de propagation evenementielie 
s'inspire du DOM (Document Object Model) 
defini par une specification du W3C : 
► www.w3c.org/TR/Dom-Level-3-Events/ 
C'est pour cette raison que les langages Java et 
JavaScript utilisent eux aussi le meme mecanisme 
de propagation evenementielie. 
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Figure 8-6 

La propagation evenementielie 
modelisee en trois phases 



Programmez votre premiere classe 
ActionScript 3 

Nous Savons maintenant mettre en place le processus de propagation eve- 
nementielie. Afin de mettre en oeuvre la fonctionnalite desiree, nous allons 
devoir creer une classe qui va integrer ce processus ainsi que les methodes 
permettant le deplacement des panneaux de notre page d'accueil. 

Creer la classe 

Pour creer notre classe, nous allons utiliser I'assistant de Flex Builder pour 
generer automatiquement un fichier de classe. Voici la marche a suivre : 
1 Selectionnez dans Flex Builder I'option F\\e>New> ActionScript Class. 
L'assistant de creation de classe s'ouvre. 
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Le SAVIEZ-VOUS ? Typographic CamelCase 

Par convention, le nom d'une classe commence 
toujours avec une lettre majuscule, comme pour 
DragTi tleWi ndow. Ce type de convention 
typographique porte le nom de CamelCase. C'est 
une pratique qui consiste a ecrire des ensembles 
de mots en mettant en majuscule les premieres 
lettres des mots lies. Cette convention typogra- 
phique est aussi devenue une mode, le marketing 
ayant genere de nombreuses marques ou noms de 
produits sous cette forme, comme PlayStation ou 
QuickTime. 

Le nom CamelCase fait reference aux creux et 
bosses d'un dos de chameau que representent 
I'alternance de majuscules et de minuscules dans 
les mots ecrits suivants cette convention. 



2 II vous faudra fournir le nom du paquetage (champ package) et de la 
classe (champ name). Entrez par exemple les noms 
acti onsen' pt. newTitleWi ndow pour le paquetage et DragTi tleWi ndow 
pour la classe (figure 8-7). Nous choisissons ce nom de paquetage 
afin de creer une arborescence /acti onsen' pt/newTitleWindow dans 
la vue Flex Navigator (figure 8-8). Ainsi, nous enregistrerons tous nos 
paquetages personnalises pour ce projet dans le repertoire 
/actionscri pt. Le choix de newTi tleWi ndow est egalement arbitraire, 
mais il indique implicitement que ce paquetage est dedie a la creation 
d'un composant derive de la classe TitleWindow. Quant au choix du 
nom de la classe DragTi tleWi ndow, il sous-entend que notre classe 
herite de cette classe TitleWindow et qu'elle ajoute la fonctionnalite 
Drag sur ce composant (le verbe drag en anglais se traduisant par 
« glisser », nous informons ainsi que notre classe permettra de faire 
glisser des composants de type TitleWindow). 



Figure 8-7 

Assistant de creation 
d'une classe ActionScript 3 
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Le fichier ainsi genere est visible sur la figure 8-9. Nous pouvons d'ores 
et deja constater que le squelette de notre classe est en place. 
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Figure 8-8 

Arborescence du paquetage et de la classe 
automatiquement generee par I'assistant 
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//TODO: implement function 
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Figure 8-9 

Fichier de classe automatiquement genere 



En tete, nous avons done la definition du paquetage dans lequel se loca- 
lise le fichier de classe : package acti onsen' pt. newTitleWindow. 

Ensuite, nous avons la declaration de la classe: public class 
DragTi tleWi ndow. 

Pour fim'r, nous avons le nom d'une methode automatiquement creee 
et dont le nom est identique a celui de la classe. 

Contenu du fichier de classe DragTitleWindow.as 

package actionscript. newTitleWi ndow 
{ 

public class DragTitleWindow 
{ 

public function DragTitleWindow() 
{ 

//TODO : implement function 
} 
} 

} 
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Constmire la classe 



Nous allons, etape par etape, construire notre classe afin de creer la fonc- 
tionnalite desiree. 

A ce stade, nous pouvons d'ores et deja importer la classe TitleWindow 
qui se trouve dans le paquetage mx.contai ners. Rappelons que nous sou- 
haitons utiliser la classe existante Ti tl eWi ndow pour en faire heriter notre 
nouvelle classe DragTi tleWi ndow. Notre nouvelle classe devra done bene- 
ficier de toutes les caracteristiques de TitleWindow. Rajoutez done ins- 
truction suivante apres la declaration du paquetage : 

Importation de la classe TitleWindow 

package actionscri pt. newTi tleWi ndow 
{ 

1 mport mx . contai ner s . Ti tl eWi ndow; 

Nous pouvons egalement importer une autre classe, que nous utiliserons 
pour la gestion des evenements du modele de propagation evenemen- 
tielle de Flex, decrit en detail dans la section precedente. Cette classe est 
bien entendu la classe MouseEvent du paquetage flash . events, car c'est 
elle qui permet d'acceder aux proprietes et methodes gerant les evene- 
ments de la souris : 

Importation de la classe MouseEvent 

import fl ash. events. MouseEvent ; 

Ensuite, il nous faudra etendre la classe TitleWindow pour en faire 
heriter notre classe DragTi tleWi ndow. Ceci est possible en utilisant le 
mot-cle reserve extends. 

DragTitleWindow herite de la classe TitleWindow 

public class DragTitleWindow extends TitleWindow 

Nous avons precise plus haut qu'ActionScript 3 necessitait la mise en 
ceuvre d'un ecouteur pour « ecouter » un evenement specifique. Cet 
ecouteur utilise la methode addEventLi stener() , dont voici la 
signature : 

Methode addEventListenerO 

public function addEventLi stener( 
type:Stri ng , 
li stener: Function , 
useCapture: Boolean = false, 
priority:int = 0, 
useWeakReference: Boolean = false): void 
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Examinons cette methode. Nous constatons la presence du parametre 
useCapture qui est regie a false par defaut. Ce parametre est utilise pour 
indiquer a la methode si elle doit ou non capturer les conteneurs parents 
de I'objet cible. Dans notre cas, c'est inutile car nous desirons capturer 
uniquement les evenements associes a I'objet cible. En effet, le but de 
notre fonctionnalite est de capturer des evenements uniquement loca- 
lises sur les en-tetes de nos composants TitleWindow (DragTi tleWindow, 
pour etre precis). Nous laisserons done ce parametre par defaut a false. 

Les evenements a capturer sont done de trois types. Ce sont tous les trois 
des evenements produits par des interactions de I'utilisateur avec la 
souris, qui feront intervenir la clase MouseEvent du paquetage 
flash, events. En effet, nous devons capturer dans I'ordre : 

1 un evenement dit Mouse Down (clic de souris et selection de I'en-tete 
du composant DragTi tleWi ndow) ; 

2 un mouvement dit Mouse Move (deplacement de la souris, en mainte- 
nant I'evenement Mouse Down actif pour deplacer simultanement le 
composant DragTi tleWindow) ; 

3 un mouvement dit Mouse Up (relachement de la souris pour deposer 
le composant DragTi tleWindow a I'endroit ou se trouve le curseur). 

Ces trois evenements decrivent dans I'ordre le processus du « glisser- 
deposer » que nous souhaitons mettre en oeuvre. lis pourront etre codes 
de cette fa9on : 

Methodes pour ajuster les trois ecouteurs 

addEventListener(MouseEvent.MOUSE_DOWN, gestionMouseDown) ; 
addEventListener(MouseEvent.MOUSE_MOVE, gestionMouseMove) ; 
addEventListener(MouseEvent.MOUSE_UP, gestionMouseUp) ; 

Ainsi, nous capturerons les evenements localises sur I'objet cible en utili- 
sant les trois interactions de la souris MOUSE_DOWN, MOUSE_MOVE et 
MOUSE_UP, toutes trois definies dans la classe MouseEvent. A chaque fois 
qu'un ecouteur interceptera I'evenement, il declenchera I'execution des 
fonctions specifiques que nous avons declarees sous les noms de 
gestionMouseDown (), gestionMouseMove() et gestionMouseUp(). 

Le code source de notre fichier de classe aura done cette structure : 

Methodes ajustant les trois ecouteurs 

package action script. newTitleWi ndow 
{ 

// importation de la classe TitleWindow 

import mx. containers .Ti tleWi ndow; 
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// importation des classes de I'API Flex que nous 

// utiliserons 

import flash .events. MouseEvent; 

public class DragTitleWi ndow extends TitleWindow 
{ 

private function gestionMouseDown(event : MouseEvent): void 
{ 

} 

private function gestionMouseMove(event : MouseEvent): void 
{ 

} 

private function gestionMouseUp(event: MouseEvent): void 
{ 

} 

public function DragTitleWi ndow() 
{ 

} 



Vous remarquerez les points suivants : 

• les methodes gestionMouseDownO, gestionMouseMoveO et 
gestionMouseUpO sont de type private, car il n'est pas utile de les 
rendre accessibles en dehors de notre classe ; 

• ces methodes prennent en argument un objet evenement Event de 
type MouseEvent ; 

• elles ne retournent rien (void) ; 

• la methode automatiquement generee par I'assistant 
DragTitleWi ndow() ne sera pas utilisee, vous pouvez done la supprimer. 

Integrer la classe dans le fichler MXML 

II est temps a present d'integrer votre classe dans le fichier MXML qui 
utilisera le nouveau composant DragTitleWi ndow. 

L'importation dans la page Home.mxml necessitera la creation d'un nouvel 
espace de nommage {namespace) dans la balise Canvas du fichier : 

Creer un nouveau namespace 

xml ns :dragTitleWindow="actionscri pt . newTi tleWi ndow. '■" 
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Ensuite, il faudra remplacer les composants TitleWindow par le nouveau 
composant derive DragTitleWindow. Par exemple, pour le panneau Edito, 
il faudra remplacer le balisage actuel... : 

<mx : Ti tl eWi ndow i d="wi ndowEdi to" 

width="100%" height="100%" layout="absol ute" ti tle="EDITO" 

showCloseButton="true" 

styleName="panneauStyle" 

ti tleIcon= "©Embed ( ' assets/ui/star_icon . png ' ) "> 



..p 



ar ce nouveau 



ball 



;age 



<dragTitleWi ndow: DragTitleWindow id="windowEdito" 

width="100%" height="100%" layout="absol ute" ti tle="EDITO" 

showCloseButton="true" 

styleName="panneauStyle" 

ti tleIcon= "©Embed ( ' assets/ui/star_icon . png ' ) "> 

Afin de vous assurer qu'il n'existe aucune erreur de syntaxe, sauvegardez 
le fichier de classe et compilez I'application. Verifiez ensuite qu'il 
n'existe aucune erreur a I'execution, en cliquant sur les panneaux de la 
page d'accueil. 

Si tout est correct, respirez un bon coup et faites une pause. Le plus dur 
reste a venir... 

Creer Tevenement Mouse Down 

Nous allons a present traiter la methode gestionMouseDown(). Cette 
methode doit gerer le premier evenement, qui correspond a un clic de la 
souris surl'objet cible pour selectionner le panneau DragTitleWindow. 

Pour voir si I'evenement a bien ete capture et traite, nous allons proceder 
en premier lieu a quelques modifications de style du panneau selec- 
tionne. Ainsi, lorsqu'un panneau sera selectionne, nous modifierons sa 
couche alpha pour le rendre a moitie transparent, nous ajusterons les 
couleurs de son en-tete pour lui donner un leger effet bleute et, enfin, 
nous modifierons la couleur de bordure du panneau. Tout ceci peut etre 
mis en oeuvre en codant les instructions suivantes dans la methode 
gestionMouseDownO : 

Modifier les styles du panneau 

this. al pha = 0.5; 

this.setStyle("headerColors", [0x000000, 0xBDE9FA]); 

this.setStyle("borderColor", 0xBDE9FA) ; 

Les proprietes de style du composant peuvent done etre directement modi- 
fiees ici, car notre composant herite de toutes les caracteristiques de 



QUALITE Verification de type 
a la compilation 

II est possible de desactiver la verification de type a 
la compilation, mais il n'est pas possible de desac- 
tiver la verification de type a I'execution. Mors que 
le typage en ActionScript 2 se limitait a une aide a 
la compilation, le typage en ActionScript 3 aide a la 
compilation et a I'execution. 



B.A.BA Le mot-cie « this » 



Le mot-cle reserve thi s indique que nous faisons 
reference a I'objet courant. Dans notre exemple, 
en faisant preceder la propriete alpha par thi s, 
nous indiquons que le changement de valeur de la 
couche alpha concerne bien I'objet courant. Ce 
mot-cle est bien connu des programmeurs 
ActionScript 1 et 2 sous Flash. 
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Attention 

Signature d'une classe surchargee 

La methode surchargee doit avoir le meme nom 
et la meme signature que la methode qui sur- 
charge. Dans le cas contraire, la surcharge sera 
consideree comme « incompatible ». 



TitleWindow. Nous commen9ons a percevoir ici tout I'interet de la pro- 
grammation orientee objet et du concept ultrapuissant d'heritage de classe. 

Compilez et observez le resultat. Rien ne se passe en cliquant sur I'en- 
tete des panneaux. Pas de panique, c'est normal, nous avons simplement 
oublie d'initialiser notre ecouteur sur I'evenement Mouse Down. 

Pour initialiser notre composant avec un ecouteur, nous pouvons observer, 
dans I'aide de Flex, les caracteristiques de la classe ancetre dont herite 
notre classe. La classe TitleWindow nous informe que la structure interne 
du composant est initialisee via la methode publique i nitialize(), elle- 
meme heritee de la classe UlComponent dont est issue TitleWindow. 

En allant plus loin dans notre recherche, I'aide dynamique de Flex nous 
indique que la phase d'initialisation d'un UlComponent est la quatrieme 
etape du processus de creation de I'instance d'un composant visuel. Mais 
le point le plus interessant est sans doute que cette methode n'integre 
pas d'ecouteur sur un evenement Mouse Down. II va falloir I'integrer en 
utilisant le concept de surcharge de classe. 

Le concept de surcharge de classe 

Le processus de surcharge d'une classe {overriding) est rendu obligatoire 
quand nous avons besoin de modifier certaines fonctionnalites heritees 
d'une classe. Dans notre exemple concret, la methode initialize() n'est 
visiblement pas complete. Nous devons alors surcharger notre classe 
heritee pour integrer un ecouteur sur un evenement Mouse Down. Pour 
mettre en ceuvre le concept de surcharge, nous devons done ajouter la 
methode existante initialize() en lui appliquant le mot-cle reserve 
override indiquant a Flex que cette methode est dite « surchargee ». 

II faudra done integrer au debut de votre classe DragTi tleWi ndow la 
methode surchargee suivante : 

Surcharge de la methode InitializeQ 

override public function i ni tialize() : void 
{ 

// execution de la methode surchargee : 

super . initial ize() ; Q 

addEvent Li stener (MouseEvent . MOUSE_DOWN , 
gestionMouseDown, false); Q 
} 

Remarquez I'utilisation du mot-cle reserve super Q. Lorsqu'une classe 
enfant etend une classe parent, comme c'est le cas dans notre exemple, 
nous devons obligatoirement passer au constructeur parent les parame- 
tres necessaires a I'initialisation de la classe parent. L'utilisation du mot- 
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cle super permet de declencher le constructeur ancetre. L'ecouteur est 
ajoute a la suite en precisant bien entendu que revenement est effectif 
sur un Mouse Down Q. 

Compilez et observez le resultat. En cliquant de nouveau sur un pan- 
neau, le rendu devrait etre similaire a celui de la figure 8-10. La couche 
alpha du panneau est diminuee de 50 %, les couleurs de I'en-tete et de la 
bordure changent. Votre evenement est correctement capture. 
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B.A,BA Methode constructeur 

La notion de methode constructeur est un con- 
cept de programmation orientee objet. En effet, 
pour passer des parametres a un objet lors de son 
instanciation, nous definissons une methode au 
sein de la classe, appelee methode constructeur. 
Le but du constructeur est d'initialiser I'objet cree. 
Celui-ci sera appele automatiquement des que la 
classe sera instanciee. 
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Figure 8-10 

Modification de I'apparence du cadre 
lorsque le bouton de la souris est enfonce 



II faut desormais creer deux nouveaux ecouteurs directement dans la 
methode gestionMouseDown() , afin d'indiquer a Flex que les evenements 
Mouse Move et Mouse Up peuvent etre captures pour accomplir le pro- 
cessus de glisser-deposer. Codez done les instructions suivantes dans 
votre methode : 

Ecouteurs de la methode gestionMouseDownO 

private function gestionMouseDown(event : MouseEvent) : void 

{ 

this. alpha =0.5; 

this.setStyleC'headerColors", [0x000000, 0xBDE9FA]); 
this.setStyleC'borderColor", 0xBDE9FA) ; 

addEvent Li stener (MouseEvent . MOUSE_MOVE , gestionMouseMove , 
f al se) ; 

addEvent Li stener (MouseEvent . MOUSE_UP , gestionMouseUp , 
f al se) ; 

} 

Nous avons integre deux nouveaux ecouteurs d'evenements operation- 
nels et, en attente d'appel, pour les methodes gestionMouseMove() (en 
cas de deplacement de la souris) et gestionMouseUp () (en cas de relache- 
ment du bouton de la souris). Poursuivons avec la methode suivante, 
gestionMouseMoveC). 

Creer revenement Mouse Move... 

Pour cet evenement, provisoirement, nous ne gererons pas le deplacement 
de la souris. Nous allons simplement verifier que I'evenement Mouse Move 
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est correctement capture lorsque I'utilisateur cherche a deplacer la souris. 
Pour controler ceci visuellement, nous allons modifier les couleurs du 
composant lors de I'appel de la methode gestionMouseMove(). Ceci est 
possible en ajoutant les instructions suivantes dans la methode : 

Nouveaux styles dans gestionMouseMoveO 

this.setStyleC'headerColors", [0x000000, 0x520000]); 
this.setStyleC'borderColor", 0x520000) ; 

Nous appliquons un theme de couleur rouge pour differencier la 
methode gestionMouseDownO de la methode gestionMouseMoveO. Ter- 
minons cette etape avec la gestion de la methode suivante : 
gestionMouseUpC). 



...puis Tevenement Mouse Up 

Meme procedure pour la methode Mouse Up : nous supprimons simple- 
ment la transparence du panneau en reajustant sa couche alpha a 100 %, 
nous « nettoyons » les modifications de style avec la methode 
clearStyleO et nous supprimons les ecouteurs en place via la methode 
removeEventLi stenerO : 

Fin du processus dans gestionMouseUpO 

this. alpha = 1; 

thi s . clears tyleC'headerColors") ; 

thi s .clearStyleC'borderColor") ; 

removeEventLi stener(MouseEvent .MOUSE_MOVE, gestionMouseMove, fal se) ; 

removeEventLi stener(MouseEvent .MOUSE_UP, gestionMouseUp, false) ; 

Compilez et observez le resultat. Les panneaux ne bougent pas pendant le 
processus de glisser-deposer, mais ils changent comme prevu de couleur et 
d'opacite. Tout semble fonctionner correctement. Nous allons done main- 
tenant attaquer le dernier processus : le deplacement des panneaux. 



Un peu de geometrie 



Le mode de propagation evenementielle est fonctionnel. II faut mainte- 
nant pouvoir deplacer les panneaux, ce qui peut etre mis en ceuvre en 
utilisant les composants du paquetage flash.geom. 

Ce paquetage est tres interessant, car il contient des classes geometri- 
ques, telles que les points, les rectangles et les matrices de transforma- 
tion, afin de prendre en charge la classe BitmapData et la fonctionnalite 
d'interception de bitmaps. 
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Le paquetage regroupe done les classes suivantes : 

Tableau 8-5 Paquetage flash.geom 



Classe 


^^^^H ^^^^^^^^^^^^^^ft 


ColorTransform 


La classe Col orTransf orm vous permet de regler les valeurs de couleur d'un objet d'affichage. 


Matrix 


La classe Matrix represente une matrice de transformation qui determine le mappage des points d'un espace de coor- 
donnees a I'autre. 


Point 


L'objet Point represente un emplacement dans un systeme de coordonnees a deux dimensions ou x 
est I'axe horizontal et y I'axe vertical. 


Rectangle 


Un objet Rectangl e est une zone definie par sa position, indiquee par son angle superieur gauche (x, y), ainsi que par 
sa largeur et sa hauteur. 


Transform 


La classe Transform rassemble des donnees sur les transformations de couleur et les manipulations de coordonnees 
qui s'appliquent a un objet d'affichage. 
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Interessons-nous en particulier a la classe qui porte le nom explicite de 
Point : 

Tableau 8-6 Classe Point 



Point 


Description 


Paquetage 


flash.geom 


Classe 


public class Point 


Heritage 


Point ^ Object 



L'objet Point represente un emplacement dans un systeme de coordon- 
nees a deux dimensions ou x est I'axe horizontal et y I'axe vertical. 

Nous devons egalement recuperer la position de la souris par rapport a la 
scene en ciblant les proprietes stageX et stageY, et en ajustant un boo- 
leen renseignant sur I'etat du bouton de la souris (nous devons en effet 
verifier que le bouton de la souris est bien presse : Mouse Down). Les 
proprietes stageX et stageY sont publiques et sont definies dans la classe 
MouseEvent. Elles fournissent les coordonnees horizontales et verticales 
auxquelles I'evenement {Mouse Down) s'est produit, par rapport aux 
coordonnees globales de la scene. 

Nous allons done creer cinq variables privees pour gerer le processus de 
deplacement : 

Declaration des variables privees de la classe DragTitleWindow 

private var nDebutX: Number; 
private var nDebutY: Number; 
private var nG1 isseDebutX: Number; 
private var nCl isseDebutY: Number; 
private var bMouseButton: Boolean = false; 



QUALITE Typage des variables 

Les variables seront systematiquement typees afin 
d'optimiser les performances de I'application. Ceci 
garantira aussi une meilleure gestion des erreurs a 
la compilation. 
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Modification de la transparence du panneau. 



Modification de couleur de I'en-tete et de la bor- 
dure. 



Ajout des ecouteurs MouseMove et MouseUp. 



Enregistrement des coordonnees par rapport au 
composant. 



Enregistrement des coordonnees par rapport a la 
scene. 



Indique que le bouton de la souris est presse 
(MouseDown). 



Ensavoirplus Classe SystemManager 

La classe SystemManager gere une fenetre 
d'application. Chaque application qui s'execute 
sur le bureau ou dans le navigateur possede une 
zone ou les visuels de I'application sont affiches. 
Cette zone peut etre une fenetre dans le systeme 
d'exploitation ou une zone reservee a I'interieur du 
navigateur 



La methode gestionMouseDown() sera done codee de cette fa9on : 

Methode evenement gestionMouseDownQ 

private function gestionMouseDown(event : MouseEvent) : void 

{ 

this. alpha =0.5; 

this.setStyleC'headerColors", [0x000000, 0xBDE9FA]); 
this.setStyleC'borderColor", 0xBDE9FA) ; 

SystemManager . addEventLi stener (MouseEvent . MOUSE_MOVE , 
gestionMouseMove, true); 

SystemManager. addEventLi stener(MouseEvent.MOUSE_UP, 
gestionMouseUp, true); 

nDebutX = x; 
nDebutY = y; 

nCli sseDebutX = event . stageX; 
nCli sseDebutY = event . stageY; 

bMouseButton = true; 



II existe aussi une methode interessante de I'API Flex pour deplacer 
notre panneau selectionne d'un point vers un autre. En effet, la classe 
TitleWindow (et done par heritage notre classe DragTitleWindow) derive 
de la classe UlComponent, qui propose la methode move() dont voici la 
signature : 

Methode moveO 

public function move(x: Number, y: Number) : void 



Parametres 

x:Number 
y :Number 



Position gauche du composant. 
Position superieure du composant. 



Cette methode deplace un composant et tous ses parents vers un endroit 
specifie. En realite, appeler cette methode revient a ajuster les proprietes 
X et y du composant. La methode doit etre operationnelle pendant la 
phase de deplacement, et done integree dans notre fonction 
gesti onMouseMove () . 

De plus, il est necessaire de stopper ici le mecanisme de propagation 
evenementielle, car il est desormais inutile d'activer les ecouteurs pen- 
dant le deplacement d'un panneau. Flex permet precisement d'intervenir 
sur la propagation d'un evenement a I'aide des methodes 
stopPropagationO et stopImmediatePropagationO : 
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• la methode stopPropagationO interrompt la propagation d'un eve- 
nement, mais n'empeche pas sa diffusion aupres des ecouteurs du 
noeud en cours ; 

• en revanche, la methode stopImmediatePropagation() interrompt la 
propagation d'un evenement et empeche sa difflision, meme aupres 
des ecouteurs du meme noeud. 

Nous utiliserons cette derniere methode qui appartient a la classe Event 
du paquetage flash. events et dont voici la signature : 

Methode stoplmmediatePropagationQ 

public function stopImmediatePropagation ():void 

La methode gestionMouseMove() sera done codee de cette fa9on : 

Methode de I'evenement gestionMouseMoveO 

private function gestionMouseMove(event : MouseEvent) : void 

{ 

if (bMouseButton) { 

event. stopImmediatePropagation() ; 

this.setStyleC'headerColors", [0x000000, 0x520000]); 
this.setStyleC'borderColor" , 0x520000) ; 

move(nDebutX + event. stageX - nCli sseDebutX, nDebutY + 
event. stageY - nCli sseDebutY) ; 

La methode gestionMouseUpO , quant a elle, sera codee de cette fa9on : 

Methode de I'evenement gestionMouseUpO 

private function gestionMouseUp (event: MouseEvent): void 

{ 

this. alpha = 1; 

this . clears tyleC'headerColors") ; 
this .clearStyleC'borderColor") ; 

event. stopImmediatePropagationO ; 

move(nDebutX + event. stageX - nCli sseDebutX, nDebutY + 
event. StageY - nCli sseDebutY) ; 

systemManager . removeEventLi stener (MouseEvent .MOUSE_MOVE, 
gestionMouseMove, true); 

systemManager. removeEventLi stener(MouseEvent .MOUSE_UP, 
gestionMouseUp, true); 

bMouseButton = false; 



i Si le deplacement est active. 



i Arret du mecanisme de propagation evenemen- 
tielle. 

i Ajustement du nouveau style de couleur. 



i Deplacement du panneau. 



Modification de la transparence du panneau, en 
reactivant ropacite. 

Reajustement des couleurs d'origine. 

Arret du mecanisme de propagation evenemen- 
tielle. 



Deplacement du panneau. 



Suppression des ecouteurs. 



i Indique que le bouton de la souris n'est plus 
actif (MouseUp). 
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En resume 

Pour verifier que tout est fonctionnel, compilez et observez le resultat. 
Les panneaux de la page d'accueil sont librement depla9ables et quelques 
optimisations sont encore possibles, mais cela nous a permis d'aborder le 
mecanisme de propagation evenementielle avec Flex, notion fondamen- 
tale pour toute application RIA. 

Nous allons maintenant poursuivre le developpement de notre etude de 
cas et I'apprentissage de I'API d'ActionScript 3 avec I'integration d'un 
nouveau module : une galerie d'images interactives tres ergonomique. 
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Module 3 - Galerie de photo 



Creer une galerie de photos 

interactive 



L'affichage d'images ou de photos dans une application RIA 
est une fonctionnalite courante, et vous y serez sans doute 
tres rapidement confrontes dans vos differents projets. Dans 
ce chapitre, nous allons profiter du developpement d'un petit 
module integrant une galerie de photos interactive pour 
decouvrir les outils de rendu d'elements {item Tenderers), 
permettant de personnaliser des composants de type liste. 
Ces outils se reveleront tres efficaces dans le cadre du 
developpement de RIA avec Flex. 



SOMMAIRE 

► Personnalisation 
d'un item Tenderer 

► Methode drop-in : 

item Tenderer sur DataGrid 

► iVletlnode inline : 

item Tenderer sur DataGrid 
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composant personnalise 
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► item Tenderer 
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► metlnode drop-in 

► metliode inline 

► composant personnalise 



Ce chapitre decrit le processus d'integration d'une galerie d'images simple 
et interactive, qui pourra servir de base a la conception de vos propres gale- 
ries d'images. Bien entendu, avec Flex, I'integration de cette fonctionnalite 
est particulierement simplifiee. Quelques lignes de code MXML suffi- 
ront. Nous decouvrirons a I'occasion les outils de rendu d'elements {item 
Tenderers), qui sont une specificite propre a Flex et qui s'avereront tres 
utiles dans la conception de vos interfaces utilisateurs comportant plu- 
sieurs formats de medias differents dans les divers modules. 



Personnaliser ses listes a Taide d'un item 
Tenderer 



Les item Tenderers sont des elements tres utiles pour personnaliser cer- 
tains composants de Flex bases sur I'affichage par « liste ». En effet, dans 
le framework Flex, vous utiliserez frequemment les composants de type 
liste suivants : 

Tableau 9-1 Composants Flex de type liste 



Nom du composant 


Description 


List 


Le composant Li st affiche une liste d'objets verticalement. II ressemble au formulaire SELECT utilise en HTML. 


DataCn'd 


Le composant DataC rid estsimilairea un composant List, mais il peutafficher plus d'une colonnededonnees, ce 
qui lui permet d'afficher plusieurs objets de differents types. 


Tree 


Le composant Tree permet d'afficher une vue hierarchisee de donnees similaires a une arborescence. Chaque element 
de I'arbre est considere comme une branche ou une feuille. Une feuille est aussi reconnue comme un point de terminal- 
son d'une branche. Nous retrouvons ce type d'arborescence pour la classification des dossiers ou repertoires (branches) 
et des fichiers (feuilles) dans a peu pres tous les systemes d'exploitation. 


Menu 


Le composant Menu cree un menu de type pop-up a selection individuelle, identique aux menus conventionnels que 
nous trouvons dans la plupart des interfaces utilisateurs de logiciel. 


TileList 


Le composant Ti 1 eLi st affiche une liste d'objets sous forme de tuiles imbriquees (t;7e en anglais). Les tiles sont des 
objets graphiques organises en lignes ou en colonnes. 


Horizontal Li st 


Le composant Hori zontal Li st permet d'afficher une liste horizontale d'objets. Nous allons utiliser ce composant 
associe a un item renderer pour la conception de notre galerie d'images. 



Les listes sont done des composants qui permettent d'afficher une col- 
lection d'elements de tout format que I'internaute pourra parcourir et 
selectionner. Dans notre etude de cas, nous emploierons done un com- 
posant Horizontal List afin de pouvoir disposer des vignettes d'images 
horizontalement sous la forme d'une liste composee de cellules. L'utili- 
sateur pourra ainsi facilement parcourir la liste avec ascenseur horizontal 
et il pourra egalement selectionner une vignette pour I'afficher en grand 
format. Le composant Horizontal List sera personnalise en utilisant un 
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item Tenderer, ce qui nous permettra d'integrer a la fois une image et des 
donnees texte dans une cellule (figure 9-1). 




Figure 9-1 

Liste horizontale integrant a la fois 
des vignettes d'images et du texte 



En selectionnant une vignette, I'image sera affichee avec une meilleure 
resolution sous la liste horizontale, accompagnee d'un descriptif textuel 
(figure 9-2). 




Figure 9-2 

Apergu du module de galerie complet 



Chaque composant de type liste possede un item renderer par defaut. 
Nous allons ainsi pouvoir creer le notre pour personnaliser I'apparence et 
le comportement d'un composant de type Horizontal Li st, dont voici les 
caracteristiques : 
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Tableau 9-2 HorizontalList 



HorizontalList 


Description j 


Paquetage 


mx.controls 


Classe 


public class HorizontalList 


Heritage 


MouseEvent ^ Event ^ Object 


Implemente 


HorizontalList ^ TileBase ^ ListBase -> ScrollControlBase ^ 
UlComponent ^ FlexSprite ^ Sprite ^ DisplayObjectContainer ^ 
InteractiveObject Inheritance DisplayObject ^ EventDispatcher ^ 
Object 



En SAVOIR plus Les item editors 

Les /tem editors (editeurs d'elements) sent simi- 
laires aux item renderers, a ceci pres qu'ils per- 
mettent aux internautes d'editer les donnees 
affichees dans les cellules, lis sont applicables sur 
les composants DataCn'd, List et Tree, a 
condition que leur propriete d'edition soit activee 
comme ceci : editable="true". 



Ouvrez maintenant le fichier Photo. mxml. Nous allons commencer par 
inserer un conteneur de type TitleWindow afin de conserver une appa- 
rence et une reactivite a ceux des precedents modules. A cet effet, nous 
appliquerons le style CSS precedemment defini pour tous les conteneurs 
de ce type : 

Insertion d'un conteneur 

<mx:Ti tleWi ndow 

ho n'zontalAlign= "center" 

styleName="panneauStyleSimple" width="100%" height="570"> 
</mx : Ti tl eWi ndow> 

Vous noterez que I'alignement horizontal des composants enfants a ce 
conteneur sera centre. 

Ensuite, nous integrerons a I'interieur des balises de ce conteneur notre 
composant HorizontalList, que nous identifierons sous le nom 
horizontal ListGallery pour la suite : 

Insertion du composant HorizontalList 

<mx:Ti tleWi ndow 

ho rizontalAlign=" center" 

styleName="panneauStyleSimple" width="100%" height="570"> 

<mx: Horizontal List 

id="horizontal ListGallery" 

col umnCount="5" 
col umnWidth="120" 
rowCount="l" 
rowHeight="160"/> 

</mx : Ti tl eWi ndow> 

Compilez le tout et observez le resultat dans la fenetre d'un navigateur. 
A ce stade, rien de significatif ; vous visualiserez un simple cadre rectan- 
gulaire et opaque de couleur blanche, encastre dans notre conteneur. 
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Pour decrire les trois methodes d'utilisation des item renderers, nous 
allons temporairement remplacer notre composant Horizontal List par 
un DataCrid. Ce composant est en effet plus explicite pour presenter la 
methode d'integration d'un item renderer dans Flex. 



Methode drop-in : item renderer sur DataGrid 



Personnaliser le composant DataGrid 

Originellement, le composant DataCrid peut assurer I'affichage de plu- 
sieurs colonnes de cellules contenant des chaines de caracteres. En utili- 
sant un item renderer personnalise, nous allons detourner I'utilisation de 
base d'un DataCrid pour afficher d'autres medias dans ses cellules, et 
ainsi personnaliser facilement notre composant. Cette methode de crea- 
tion ^ttem renderer est nommee drop-tn. 



Prenons comme exemple le bloc de code suivant : 

Item renderer sur un DataGrid 

<mx:Ti tleWi ndow 

ho rizontalAlign=" center" 

styleName="panneauStyleSimple" width="100%" height="570"> 
<mx: DataGrid 
i d= " testDataC ri d " 
color="#000000" 

dataProvider="{dataGridData}"> 
<mx:columns> 

<mx: DataCridColumn 

dataField="prenomJoueur" 
headerText="Prenom"/> 
<mx: DataCridColumn 

dataField="nom3oueur" 
headerText="Nom"/> 
<mx: DataCridColumn 

dataField="image3oueur" 
headerText=" Photo" 
1 temRenderer="mx . control s . Image"/> 
</mx: col umns> 
</mx: DataCrid> 
</mx:Ti tleWi ndow> 

Nous avons integre un composant DataCrid constitue de trois colonnes : 
deux contiennent du texte, et la derniere une simple image. C'est ici 
qu'intervient notre item renderer. La methode drop-tn appliquee sur un 
DataCrid consiste done a inserer dans les proprietes d'une ou plusieurs 
colonnes une instruction du type : itemRenderer="mx. controls .Image". 
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En savoir plus 
Composants pour item Tenderers 

Les composants utilisables avec la propriete 
itemRenderer sont les suivants : 

• Text ; 

• TextArea; 

• Textlnput; 

• Numen'cStepper ; 

• Button ; 

• CheckBox; 

• DateField; 

• Image ; 

• Label. 



Ici, nous avons simplement personnalise le contenu de notre troisieme 
colonne afin qu'elle affiche un element graphique a la place du texte. 
Nous implementons ainsi un itemRenderer en referen9ant la classe du 
framework Flex, d'ou I'insertion de la classe mx.control s. Image pour 
ajouter une image dans les cellules de la troisieme colonne. 

Vous aurez probablement remarque I'utilisation de la propriete 
dataProvider sur le composant DataGn'd. Nous connaissons son utilite : 
elle va fournir du contenu au composant en utilisant le concept d'asso- 
ciation de donnees que nous avons egalement aborde precedemment 
(d'ou I'utilisation des accolades [} pour signifier la liaison de donnees). 

Utiliser les tableaux avec Flex 

Le contenu sera defini sous la forme d'un tableau code en MXML dont 
voici le bloc d'instructions : 



En savoir plus Les tableaux avec Flex 

La classe Array permet d'acceder a des tableaux 
de donnees et de les manipuler. Les tableaux avec 
Flex sont indexes a partir de zero, ce qui signifie 
que le premier element du tableau est [0], le 
second element est [1], etc. 



Liaison de donnees pour le composant DataGrid 

<mx:Array id="dataGridData"> 

<mx: Object 
prenom3oueur="Marius" 
nom3oueur="Tresor" 

image! oueur=" . /assets/gal lery/pl ay erl.jpg"/> 
<mx: Object 
prenom3oueur="3oel " 
nom3oueur="Bats" 

image! oueur=" . /assets/gal lery/player2 . jpg"/> 
<mx: Object 
prenom3oueur=" Bernard" 
nom3oueur="Lacombe" 

image! oueur=" ./assets/gallery/player 3 . jpg"/> 
</mx:Array> 

La personnalisation d'un composant est excessivement simple avec cette 
methode drop-in. Le resultat est visible sur la figure 9-3. 

Tableau 9-3 Classe Array 



Array 


Description 


Paquetage 


Top Level 


Classe 


public dynamic class Array 


Heritage 


Array -^ Object 



L'utilisation de cette premiere methode est tres simple et rapide. Cepen- 
dant, elle n'est malheureusement pas tres ergonomique dans le cas ou 
vous souhaiteriez controler les proprietes des differentes instances de vos 
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composants. Afin de fournir un controle complet sur vos item renderers, 
il est preferable d'employer la seconde methode, dite inline. 



Pieiioni T 


lloni 


Plioto 


M^iriiis 


Tresor 


a 


Joel 


Bats 


r\ 


Bernard 


Laconihe 


!? 




















^^^^^^^^^^1 


^^^^^^^^^^^^1 



Figure 9-3 

Item Tenderer avec la methode drop-in 
sur un DataGrid 



Methode inline : item renderer sur DataGrid 

La methode inline est quasiment identique a la methode drop-in. 
Cependant, nous utiliserons dans ce cas la balise <mx: i temRenderer> 
pour personnaliser notre colonne de DataGrid. 

Les item Tenderers peuvent utiliser la plupart des classes du framework 
Flex, ce qui indue : 

• Metadata ; 

• Bi ndi ngs ; 

• Effects ; 

• Sen' pt ; 

• Service ; 

• State ; 

• Style. 

Voici le bloc d'instructions utilisant cette methode. Le resultat est iden- 
tique a la methode precedente, mais le controle sur Vitem renderer est 
plus souple. 

<l— METHODE INLINE — > 
<mx:Ti tleWi ndow 

ho rizontalAlign=" center" 

styleName="panneauStyleSimple" width="100%" height="570"> 

<mx: DataGrid 

i d= " testDataG ri d " 
color="#000000" 

dataProvider="{dataGridData}"> 
<mx:columns> 

<mx: DataGridColumn 

dataField="prenom3oueur" 
headerText="Prenom"/> 
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<mx:DataCn'dCol umn 

dataField="nomJoueur" 
headerText="Nom"/> 
<mx:DataGn'dCol umn dataField="imageJoueur" 
headerText=" Photo "> 
<mx : 1 temRenderer> 
<mx:Component> 
<mx: Image /> 
</mx : Component> 
</mx : 1 temRenderer> 
</mx: DataGn'dColumn> 
</mx: columns> 
</mx:DataCn'd> 
</mx : Ti tl eWi ndow> 

Vous noterez I'utilisation de la balise <mx:i temRenderer> encadrant une 
balise <mx:Component>. Toutes les donnees accessibles sur un enregistre- 
ment (une ligne) du composant DataGn'd sont egalement accessibles a 
notre item rena 



Utiliser un composant personnalise 

La troisieme methode consiste a creer un composant personnalise puis a 
I'appeler en mode drop-tn ou inline. Nous avons deja cree des compo- 
sants personnalises lots de la realisation du squelette de I'etude de cas au 
chapitre 4. 

C'est cette methode que nous allons utiliser avec notre composant 
Horizontal Li St. Nous allons done creer, a la racine du projet, un nouveau 
fichier MXML que nous nommerons ItemRenderCallery .mxml (figure 9-4). 
Rappelons que la procedure pour creer un composant personnalisable avec 
Flex Builder est la suivante : File>New>MXMLComponent. 



Figure 9-4 

Creation d'un nouveau composant personna- 
lise en MXIVIL 
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E- & asseiis 


EI-lS' views 








"^ MediaFooii.css 


""™ MediaFooii.mxml 
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Le code MXML de ce composant est tres simple. Nous allons tout natu- 
rellement creer un conteneur de type VBox afin d'agencer les differents 
composants verticalement. La disposition finale constituera la structure 
d'une cellule de notre liste horizontale. 

Code MXML composant ItemRenderGallery 

<?xml version="l. 0" encoding="utf-8"?> 

<mx:VBox xml ns :mx=" http://www.adobe.com/2006/mxml " 

ho n'zontalAlign=" center" 

verticalAlign= "middle" vertical Gap="0"> 

<mx:Imagesource="{data. vignette}"/> 

<mx: Label text=" {data. titre}" styleName="textWhi teCal lery"/> 
<mx : Label text=" {data . date} " styl eName=" textWhi teCal 1 ery " 
textAlign=" n'ght"/> 

</mx:VBox> 

Nous ajusterons la propriete vertical Gap a afin de reduire I'espacement 
entre les composants. La liaison de donnees avec les textes et I'image de 
chaque cellule sera effective avec les attributs source="{data. vignette}" 
pour I'image, text="{data. titre}" pour le texte du titre et 
text="{data. date}" pour le texte concernant la date. 

Le style a appliquer sur le texte sera defini dans le fichier CSS 
MediaFoot .CSS et contiendra le bloc suivant : 



Style CSS pour le texte du composant 

. textWhi teCal 1 ery 
{ 

color: #FFFFFF; 

fontSize: 9; 

fontWeight: normal; 

fontFamily: Verdana; 

} 

Enfin, dans le fichier Photo. mxml, nous insererons notre composant liste 
Horizontal Li St tout en faisant un appel a Vttem Tenderer construit avec 
notre composant personnalise : 

Composant HorlzontalLlst dans conteneur TitleWindow 

<!-- Methode composant personnalise --> 
<mx: TitleWindow 

title="{hor Li steal 1 ery. selectedltem. titre}" 

ho rizontalAlign=" center" 
styleName="panneauStyleSimple" 
width="100%" height="570"> 
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<mx: Horizontal List 

id="horLi steal lery" 

dataProvider="{galerie}" 

col umnCount="5" 

col umnWidth="120" 

rowCount="l" 

rowHeight="160" 

itemRenderer="ItemRenderGallery" 

sty leName=" horizontal Li stVerticalScrol IBar" /> 



</mx : Ti tl eWi ndow> 

La liaison avec Vttem Tenderer est, tout simplement, effective via la pro- 
priete i temRenderer="ItemRenderGal lery" (acces drop-tn). 

Vous remarquerez que la propriete dataProvider fait reference a un 
tableau identifie sous le nom galerie, dont voici le contenu : 

Tableau de donnees pour galerie de photos 

<mx:Array id="galerie"> 

<mx: Object 

titre="Match n°l" 
date="07/10/2009" 

vignette=" ./assets/gal lery/vign_01. jpg" 
imageGrande=" ./assets/gal lery/image_01. jpg" 
description="Lorem ipsum dolor sit amet..."/> 
<mx: Object 

titre="Match n°2" 
date="08/10/2009" 

vignette=" ./assets/gal lery/vign_02 . jpg" 
imageGrande=" ./assets/gal lery/image_02 . JPS" 
description="Praesent vestibulum Aenean ..."/> 
<mx: Object 

titre="Match n°3" 
date="09/10/2009" 

vignette=" ./assets/gal lery/vign_03. jpg" 
imageCrande=" ./assets/gal lery/image_03 . JPS" 
description="Pha sellus porta. Fusee ..."/> 
<mx: Object 

titre="Match n°4" 
date="10/10/2009" 

vignette=" ./assets/gal lery/vign_04. jpg" 
imageGrande=" ./assets/gal lery/i mage_04.jpg" 
description="Fusce suscipit varius mi Cum..."/> 
<mx: Object 

titre="Match n°5" 
date="ll/10/2009" 

vignette=" ./assets/gal lery/vign_05. jpg" 
imageGrande=" ./assets/gal lery/image_05 . JPS" 
description="Lorem ipsum dolor sit amet, ... "/> 
<mx: Object 



156 



titre="Match n°6" 

date="12/10/2009" 

vi gnette= " . /assets/gal 1 e ry/vi gn_06 . j pg " 
imageCrande=" . /assets/gal lery/image_06. jpg" 
descri ption="Praesent vestibulum Aenean ..."/> 
<mx: Object 

titre="Match n°7" 

date="13/10/2009" 

vi gnette= " . /assets/gal 1 e ry/vi gn_07 . j pg " 
imageCrande=" . /assets/gal lery/image_07. jpg" 
descri ption="Praesent vestibulum Aenean ..."/> 
</mx: Array> 

Le style du composant Horizontal Li st est egalement defini dans le 
fichier CSS : 



. horizontal Li stVertical Scroll Bar 
{ 



backgroundColor: 
color: 

cornerRadi us : 
fontWeight : 
selectionColor : 
rol lOverColor: 



#000000; 

#FFFFFF; 

0; 

normal ; 

#878787; 

#136CA5; 



} 



Vous pouvez a present compiler et observer le rendu dans la fenetre d'un 
navigateur. Uttem Tenderer associe a notre composant de type liste hori- 
zontale fonctionne correctement (figure 9-5). 




Figure 9-5 

Integration d'un composant HorizontalList 
associe a un item Tenderer 
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II reste a present a coder I'affichage de I'image grand format sous la liste 
horizontale avec le texte descriptif qui lui est associe. Nous pourrions par 
exemple creer un second composant personnalisable via un second item 
renderer. Nous nous contenterons ici d'ajouter un conteneur VBox inte- 
grant I'image et le texte. Nous implementerons ensuite la liaison avec le 
tableau de donnees en utilisant la technique de liaison de donnees. Le 
bloc d'instructions MXML suivant assure cette fonctionnalite : 



Affichage de I'image grand format dans une VBox 

<mx:VBox id="photoGrandFormat"> 
<mx: Image id="img" 

source="{horLi stGal lery . selectedltem. imageCrande}" /> 
<mx: Label text="{horLi stGallery . selectedltem. description}" 

styleName="textWhiteSmal 1 "/> 

Compilez et observez le resultat en cliquant sur une cellule du compo- 
sant liste horizontale. L'affichage de I'image et du texte fonctionne cor- 
rectement, mais il est un peu abrupt. Nous allons done utiliser les effets 
du framework Flex pour adoucir I'apparition de I'image grand format. 

Pour cela, ajoutez I'evenement suivant dans la balise 
<mx: Horizontal Li st> : cl ick=" fond u. play (); ". 

Cette instruction appellera I'effet identifie par le nom « fondu » dont 
voici le code MXML : 

<mx:Di ssol ve 
id="fondu" 

duration="1000" 

target="{photoGrandFormat}" 

al phaFrom="0. 0" alphaTo="l. 0"/> 
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En resume 

Dans ce chapitre, nous avons pu constater que Flex fournit de nombreux 
composants permettant I'affichage d'elements aux formats differents 
comme les Datagn'd, les Horizontal List et autres Tree. Par defaut, 
ceux-ci n'affichent que du contenu texte. Cependant, ils nous ont permis 
de mettre en oeuvre une notion importante de Flex qui nous donne le 
controle complet sur le contenu des cellules de ces composants : les item 
Tenderers. Grace a eux, le developpeur Flex peut aisement concevoir des 
applications plus complexes et plus creatives en quelques lignes de code, 
comme notre petit module de galerie d'images interactives. 

Dans le chapitre suivant, nous allons decouvrir une solution Open 
Source permettant le developpement d'applications Flex reliees a une 
base de donnees via la technologie AMF, un format d'echange binaire 
optimal employe dans la communication client- serveur. 
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MODULE 4 _ 

Base de donnees « Joueurs » 
AMFPHP - MySQL 




Module 4 - Base de donnees « Joueurs » 



Le format AMF 
avec Flex 



Les passerelles entre une application cliente frontale Flex 
et un serveur support sont nombreuses, et les moyens 
de communication ne font pas defaut. Cependant, certaines 
technologies s'illustrent grace a leurs performances, 
notamment celles utilisant le format AMF. Dans ce chapitre, 
nous allons utiliser ce format avec la passerelle Open Source 
AMFPHP et une base de donnees MySQL pour concevoir 
le quatrieme module de notre etude de cas : la base de donnees 
« Joueurs ». 



SOMMAIRE 

► Comparaison des formats 

► Presentation d'AMFPHP 

► Etude de cas 

► Installation d'AMFPHP 

► Creation de I'interface 
utilisateur 

► Appel d'une methode distante 
a partir de Flex 

► Code ActionScriptdu module 

MOTS-CLES 

► AMF 

► AMFPHP 

► Flash Remoting 

► RemoteObject 

► serialisation automatique 



En SAVOIR plus Flash Media Server 3 

Aujourd'hui, Flash Media Server version 3 est 
divise en deux produits : 

Flash Media Interactive Server 3, un serveur de dif- 
fusion en continu qui prend en charge les applica- 
tions multivoies (chat video par webcam, jeux en 
ligne, voix sur IP, etc.). 

Flash Media Streaming Server 3, un serveur qui 
diffuse en continu des videos protegees, en direct 
ou a la demande. Cette solution est moins one- 
reuse que la premiere, mais moins complete. 



AMF, un format dedie au lecteur Flash 

Le format AMF {ActtonScrtpt Message Format) a ete cree par la societe 
Macromedia lors du developpement de sa solution Flash Communica- 
tion Server MX en 2002. Ce serveur porte aujourd'hui le nom de Flash 
Media Server, commercialise desormais par Adobe. II est tres utilise 
pour la communication par video en temps reel entre plusieurs clients, 
comme dans le cadre du deploiement de jeux multijoueurs. 

Le developpement de ces serveurs repose sur I'utilisation du format 
binaire AMF optimise pour les interactions client-serveur et dedie au 
lecteur Flash qui I'interprete facilement. La compression de ce format 
etant optimale pour le lecteur Flash, les delais de traitement sont tres 
courts, car le processus d'analyse et d'interpretation des flux de donnees 
est minimise. Le format AMF est le format dit « natif » du lecteur Flash. 



B.A.BA Le format E4X 



E4X (ECMAScript pour XML) est une extension du 
langage de programmation ECMAScript. II rend 
I'utilisation de XML plus facile et se veut une alter- 
native a I'interface DOM, afin de permettre I'acces 
a un document XML de maniere plus simple et 
plus intuitive pour les developpeurs. E4X est 
integre a ActionScript 3. II est defini dans le stan- 
dard ECMA 357. 



Alternative Le format XML 

Un flux XML est toujours envoye sous forme de 
chames de caracteres. II sera done naturellement 
plus lourd et plus long a traiter qu'un flux binaire. 
En realite, I'interpretation du flux de donnees texte 
XML sera effective a I'interieur meme du lecteur 
Flash, ce qui consommera plus de memoire que si 
nous utilisions un format binaire natif C'est la 
raison pour laquelle le format AMF sera toujours 
plus interessant en termes d'occupation memoire 
et de bande passante que le format XML. 



Comparaison des formats 

Les benchmarks ont ete crees pour comparer les performances d'une 
technologie a celles d'une autre. Et ces benchmarks semblent nous con- 
firmer le fait que le format AMF demeure plus efficace que les autres 
alternatives. En effet, une solution possible serait d'utiliser le format 
XML ou encore le format SOAP, mais nous constaterons rapidement 
que ceux-ci sont beaucoup moins efficaces que le format AMF. 

Prenons, par exemple, le benchmark « Census » de James Ward qui nous 
permet de comparer objectivement les differentes alternatives. Vous le 
trouverez a cette adresse : http://www.jamesward.com/census. II apparait que 
le format AMF3 utilise avec Flex est beaucoup plus rapide que les tech- 
nologies utilisant le format SOAP (Ajax ou Flex), et est surtout beau- 
coup plus econome en bande passante, car la representation du flux 
AMF est plus legere que celle utilisee pour les formats E4X ou SOAP. 

Rappelons qu'il existe trois methodes pour les interactions de donnees 
en back-end avec le framework Flex : 

• la classe HTTPService que nous avons deja utilisee precedemment. 
Cette solution recupere et envoie des donnees via HTTP ; 

• la classe WebService qui recupere et envoie des donnees via le format 
SOAP; 

• la classe RemoteObject qui recupere et envoie des donnees via le 
format AMF. Cette technologie porte le nom de Flash Remoting. 

La methode RemoteObject est done la plus efficace et la moins gour- 
mande en bande passante. Dans ce chapitre, nous aliens interfacer une 
base de donnees simple avec notre application Flex, en utilisant la classe 
RemoteObject associee au format AMF. II existe plusieurs passerelles 
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Figure 10-1 

Benchmark Census 



permettant I'utilisation de cette classe avec le format AMF, comme les 
serveurs LCDS ou encore Coldfusion. Mais ces solutions ne sont pas 
gratuites et ont un cout non negligeable, ce qui ne conviendrait pas a 
tous les projets ni a tous les budgets. Heureusement, il existe des solu- 
tions Open Source performantes, dont la passerelle AMFPHP, que nous 
allons utiliser dans ce chapitre. 



Ensavoirplus Le framework LCDS 

LCDS (LiveCyde Data Services) est un fra- 
mework d'Adobe qui simplifie le developpement 
d'applications Flex et AIR. II facJIite la gestion des 
echanges de donnees entre le client et le serveur. 



La serialisation automatique avec AMFPHP 

AMFPHP est une implementation PHP libre et gratuite du format 
AMF. En d'autres mots, AMFPHP permet de connecter une applica- 
tion Flex ou Flash a un serveur PHP, avec le format AMF. Outre le gain 
en performance et I'economie de bande passante, I'interet d'utiliser 
AMFPHP est de pouvoir serialiser automatiquement tous les types de 
donnees echangees entre les langages ActionScript et PHP. 

En realite, la serialisation des types de donnees permet aux developpeurs 
de ne pas se preoccuper du type de donnee a envoyer. Par exemple, si le 
developpeur envoie un type de donnee Array a partir de Flex, la passe- 
relle AMFPHP s'occupera de fournir automatiquement le type corres- 
pondant en PHP, autrement dit un type array interpretable en PHP. 



En SAVOIR plus le serveur ColdFusion 

Adobe ColdFusion est un serveur d'applications et 
un framework de developpement logiciel qui est 
utilise pour le developpement de sites Internet 
dynamiques, comparable a Microsoft ASP.NET ou 
PHP. ColdFusion permet au developpeur de creer 
des sites Internet dynamiques relies avec des ser- 
veurs de bases de donnees. 
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En savoir plus 
Types interpretes et types supportes 

Les types supportes (boolean, string, 
array) sent differents des types interpretes 
(XML, Date, ArrayCol lection) qui sent 
automatiquement convertis en cliames de carac- 
teres pouvant etre traitees en PHP. 



En SAVOIR PIUS le Class Mapping 

II est egalement possible d'echanger, entre Flex et 
PHP, des donnees avec des types personnalises. 
Cette technique porte le nom de Class Mapping. 



Autre exemple, si vous travaillez avec MySQL et que vous envoyez une 
ressource MySQL avec PHP vers Flex, le type de donnee serialise sera 
un ArrayCol lection en ActionScript. 

Ce principe de serialisation des types de donnees est tres appreciable 
pour les developpeurs. La simplification du processus de transformation 
du type de donnee via la passerelle AMFPHP vous permettra de tra- 
vailler rapidement et proprement. 

Voici le tableau de conversions de types de donnees possibles entre 
ActionScript et PHP via la passerelle AMFPHP : 

Tableau 10-1 Tableau de conversions de types via AMFPHP 



Type ActionScript 


Type PHP 


Commentaire 


Serialisation 
automatique 


Null 


null 




Qui 


Boolean 


boolean 




Qui 


String 


string 




Qui 


Date 


float 


UNIXtimestamp 


Non 


Array 


array 




Qui 


Object 


associative 
array 




Qui 


XML 


string 




Non 


ArrayCollection 


Ressource MySQL 


De PHP vers ActionScript 
uniquement 


Qui 



En SAVOIR PIUS Environnement EasyPHP 

EasyPHP permet de faire fonctionner localement 
des scripts PHP sans se connecter a un serveur 
externe. Cet environnement integre un serveur 
Apache, un serveur de base de donnees MySQL, un 
interpreteur de scripts PHP et une administration 
SQL(PHPMyAdmin). 



Utiliser AMF dans notre application 

Pour notre projet, nous concevrons une simple base de donnees MySQL 
et une interface client qui affichera son contenu, tout en permettant de 
lancer les methodes de base d'un service d'administration d'une base de 
donnees : I'affichage, I'ajout et la suppression des enregistrements. Ce 
module reste elementaire, mais il servira d'exemple pour I'integration de 
la passerelle AMFPHP dans un projet Flex. 

Installer AMFPHP 

Vous pouvez telecharger la derniere version d'AMFPHP depuis la sec- 
tion Download du site http://www.amfphp.org ; recuperez la version 1.9 
beta 2 ou ulterieure. 

Recuperez et installez ensuite un serveur PHP. Nous utiliserons 
EasyPHP pour la suite de ce chapitre (http://www.easyphp.org/). 



164 




Base de donnees joueurs 



II^^^^^^B 


[^^^^^^1 


B^^^^^l 


Q^^^^^^B 


[SH 


H 


H 


H 


H 




1 Joel 


Bats 


gardjen 


Paris 


a 1 


■ 


■ 


■ 


■ 






Figure 10-2 

Module Flex connecte a une base de donnees 
MySQL via AMFPHP 



Dans le repertoire \www d'EasyPHP (par exemple C:\Program 
Fi les\EasyPHP 2 . Obl\www pour les utilisateurs Windows), creez un sous- 
repertoire \medi afoot et installez-y tous les fichiers de la passerelle 
EasyPHP (figure 10-3). 



» C:\Proeram FilesVEasyPHP 2.0b1ta™™r\mediafoot [7][n][x] 


Fichier Edition 


Al^l^ichage 


Favoris Outils ? 


IT 


Q Precedente 


O 


• ^ 1 jD Rechercher 


» 

Ig; Dossiers 


Adresse |(^ C;\Program Files\EasyPHP 2.0bl\www\medial^oot v | OK | 


Norn -i 




Taille 


Type 


Date de modificat 


(^browser 






Dossier de fichiers 


02/11/2008 13:02 


Qoore 






Dossier de fichiers 


02/11/2008 13:02 


(£| services 






Dossier de fichiers 


02/11/2008 13:02 


[^ .htaccess 




1 Ko 


Fichier HTACCESS 


22/05/2006 22:01 


^ gateway, php 




6Ko 


PHP Script 


20/01/2008 14:45 


^globals.php 




1 Ko 


PHP Script 


21/01/2007 15:15 


^json.php 




1 Ko 


PHP Script 


21/01/2007 17:57 


^phpirfo.php 




1 Ko 


PHP Script 


13/01/2007 13:43 


^xmlrpc.php 




1 Ko 


PHP Script 


21/01/2007 17:27 


< I 






III 


1 > 



Figure 10-3 

Fichiers AMFPHP copies sur un serveur EasyPHP 
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Test d'installation 

Vous pouvez a present tester I'mstallation d'AMFPHP sur votre serveur 
local. Pour cela, il faut que le serveur Apache et le serveur de base de 
donnees MySQL soient demarres (figure 10-4). 



Figure 10-4 

Serveurs EasyPHP demarres 



g, II Apache | , Demarre 



MvSQL 



30/10 15:09:31 EasyPHP: Demarrage des serveurs 

30/10 15:03:37 MySql : Le fichier de configuration a ete modifie 

30/10 15:03:37 Apache : Le fichier de configuration a ete modifie 







Pour tester I'installation d'AMFPHP, faites un clic droit sur I'icone 
EasyPHP dans votre barre des taches et selectionnez I'option y\leh local. 
Puis choisissez le fichier gateway, php dans votre repertoire \medi afoot. 
AMFPHP est pleinement fonctionnel si le message de la figure 10-5 
s'affiche dans votre navigateur Internet. 



Figure 10-5 

AMFPHP est correctement installe. 



Fichier Edition AFfichage Historique Marque-pages Outils 



o 



\- 



- ^ , ■ . ^ |D hl:l:p://127.0.0.1/mediapQQl:/gal:eway.| t| ^| | |G| ■" | Google | ^ 



amfyhp and this gateway are installed correctly. You may now connect to this gateway from 
Flash. 

Note: If you're reading an old tutorial, it will tell you that you should see a download wmdow 
instead of this message. This confused people so this is the new behaviour starting from amfyhp 
1.2. 

View the amfphp documentation 

Load the service browser 



Creer la base de donnees MySQL 

La base de donnees peut etre administree directement avec EasyPHP. 
Selectionnez pour cela I'option Administration puis MySQL administration 
dans PHPMyAdmin. 

Vous pouvez alors creer une base de donnees MySQL, que nous appelle- 
rons medi afoot. Elle ne contiendra qu'une seule table que nous nomme- 
rons joueurs. Commencez done par creer une base de donnees en 
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remplissant le champ Creer une base de donnees, puis pressez le bouton 
Creer. Voici le code SQL de creation de la table. Vous pouvez executer 
les requetes SQL directement dans I'interface d'administration de votre 
base de donnees en selectionnant I'onglet SQL. Le code qui suit com- 
prend la creation de la table et I'insertion de quelques enregistrements. 

Creer la table et Inserer quelques joueurs 



phpMyAdmin SQL Dump 
version 2.9.1.1 
http://www. phpmy admin . net 

Serveur: localhost 

Cenere le : Dimanche 02 Novembre 2008 a 19:50 

Version du serveur: 5.0.27 

Version de PHP: 5.2.0 

Base de donnees: 'mediafoot' 



< 

E 



Structure de la table 'joueurs" 



CREATE TABLE "joueurs" ( 

"id" int(ll) NOT NULL auto_increment, 

"prenom" varchar(30) NOT NULL, 

"nom" varchar(30) NOT NULL, 

"position" varchar(30) NOT NULL, 

"club" varchar(30) NOT NULL, 

PRIMARY KEY ("id") 
) ENCINE=InnoDB DEFAULT CHARSET=latinl AUT0_INCREMENT=39 



Contenu de la table "joueurs" 



INSERT INTO " 


(1, 


'lean' , ' 


(2, 


' Luis ' , ' 


(4, 


'Michel ' , 


(5, 


'Bernard' 


(6, 


'Bruno' , 


(7, 


'Joel', ' 


(8, 


'Mari us ' , 


(12, 


'Alain' , 


(18, 


'Sonny' , 


(37, 


'lean Pi 


(38, 


' Georges 



joueurs" ("id", "prenom", "nom" 
Tigana' , 'milieu', 'Bordeaux'), 
Fernandez', 'milieu', 'Paris'), 

'Platini', 'milieu', 'luventus'), 
, 'Lacombe', 'attaquant', 'Lyon'), 
'Bellone', 'attaquant', 'Bordeaux'), 
Bats', 'gardien', 'Paris'), 
'Tresor', 'defenseur', 'Bordeaux'), 
'Ciresse', 'milieu', 'Bordeaux'), 
'Anderson', 'attaquant', 'Lyon'), 
Pierre', 'Papin', 'attaquant', 'Marseille') 



position", "club") VALUES 



' Weah ' 



attaquant 



'Paris') ; 



La table joueurs est composee de cinq champs simples (figure 10-6). Le 
premier champ portant le nom id est la cle primaire de la table. Encore 
une fois, notre objectif n'est pas de construire une base de donnees com- 
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^ g g 
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Base de donnees 


mediafoot(l) 


V 




mediafoot(l) 


g youeurs^ 



plexe, mais de montrer un exemple simple d'interfa9age avec AMFPHP 
afin de se concentrer sur I'essentiel de notre sujet, c'est-a-dire la creation 
des services d'administration entre Flex et un script PHP. 



gS Serveur: localhost ► ^ Base de donnees: mediafoot ► mii Table: joueurs "InnoDB free: 4098 kB" 

MAfficher tf Structure ^gjSQL pRechercher »clnserer ^Exporter ^Importer 
J^Operations HVider [^Supprimer 



■ 



I 



Champ 


Type 


Interclassement Attributs 


Null 


Defaut 




Extra 






Ac 


D id 


int(ll) 






Non 






auto. 


Jncrement 


m 


^' 


X 


D prenom 


varchar(30) 


latin 1_swedish_ci 




Non 










■ 


^ 


X 


D nom 


varchar(30) 


latin 1_swedish_ci 




Non 










■ 


^ 


X 


D position 


varchar(30) 


latin 1_swedish_ci 




Non 










■ 


^ 


X 


D club 


varchar(30) 


latin 1_swedish_ci 




Non 










■ 


^ 


X 


t Tout cocher / Tout decocher Pour la selection 


: ■ 


^ 


X 


B 


m 


m 









^ Version imprimable ^ Gestion des relations ^ Suggerer des optimisations quant a la structure de la table 

® 

p Ajouter 1 



champ(s) ©En fin de table QEn debut de table QApres 



id 



Executor 



Index: © 


Nom de la cle Type Cardinalite Action 


Cliamp 


PRIMARY PRIMARY 11 ^' X 


id 


Creerune clef sur 


1 


colonne(s) Executor 




Statistiques 


Information Valeur 



Espace utilise 


Type 


Espace 


Donnees 


16 384 


Index 





Total 


16 384 



format 
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Figure 10-6 Base de donnees MySQL, structure de la table joueurs 



En SAVOIR plus Syntaxe Javadoc 

Les commentaires places dans nos scripts PHP utili- 
sent la syntaxe Javadoc. Javadoc est un outil deve- 
loppe par Sun Microsystems permettant de generer 
une documentation d'API au format HTML depuis 
les commentaires presents dans un code source en 
Java. Le Service Browser d'AMFPHP affiche ces 
commentaires lors de la selection d'une methode. 



Connecter AMFPHP a la base de donnees 

Nous allons a present connecter AMFPHP a la base de donnees. II 
existe une interface qui permet de tester les services crees sans passer par 
Flex, accessible en selectionnant I'option Web local via EasyPHP, puis le 
sous-repertoire \browser dans le dossier \medi afoot. L'interface de test 
se lance automatiquement (figure 10-7), elle porte le nom de Service 
Browser et est plutot utile pour le debogage entre AMFPHP et la base de 
donnees MySQL. 



Toujours dans le dossier \medi afoot, creez ensuite un sous-repertoire 
\joueurs. Vous y ecrirez le service distant d'administration de la base de 
donnees en scripts PHP. Commencez done par creer un fichier qui inte- 
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listTemplates 



dats - An object 
containing 'label' and 
'data' ke^^ 



I Transferl: de? donnee? depui? 127.0,0.1.. 



I 



Figure 10-7 

Service Browser d'AMFPHP 



grera une classe PHP (appelez-le Joueurs. php, en respectant bien la 
casse) avec les differentes methodes du service distant dont voici les deux 
premieres : 

Fichier integrant la classe PHP Joueurs et deux methodes 

<?php 

class Joueurs 

{ 

function JoueursO 
{ 

// connexion mysql 

mysql .connect ("local host", "root", ""); 
mysql _select_db("mediafoot") ; 
} 

©desc affiche tous les joueurs 

'V 

function getPlayers() 



{ 



return mysql_query("SELECT * FROM joueurs"); 



} 
?> 



La premiere fonction permet la connexion a la base de donnees MySQL en 
utilisant les scripts PHP usuels (mysql_connect et mysql_select_db). La 
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seconde fonction, getPlayersO, execute une requete SQL "SELECT * FROM 
joueurs" afin de recuperer tout le contenu de la table joueurs et I'afficher. 

Enregistrez et relancez le Service Browser, selectionnez le paquetage 
joueurs, puis la classe Joueurs et appelez la methode getPlayers() en 
appuyant sur le bouton CALL. Le contenu complet de la table joueurs 
s'affiche dans I'onglet RecordSet view (figure 10-8). En realite, le Service 
Browser recupere un objet de type ArrayCollection et I'affiche dans un 
composant DataCn'd. C'est plus ou moins ce que nous allons concevoir 
dans notre application Flex. 

Tout fonctionne correctement, il reste done a parametrer votre applica- 
tion Flex afin de la connecter avec la base de donnees. 



Figure 10-8 

Recuperation des donnees 
dans Service Browser 
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I Transfert des donnees depuis 127.0.0.1 



Configurer rapplication Flex 

Pour connecter votre application Flex a la passerelle AMFPHP, il est 
indispensable d'ajouter un fichier de configuration pour le compilateur. 
Celui-ci doit se trouver a la racine du projet et s'appeler services- 
config.xml (figure 10-9). 

Le fichier services-config .xml est le fichier de configuration par defaut 
pour les services distants. Voici son contenu : 
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^ Flex Navigator ^ 
r ■■ d MediaFoot_chap08 

i fi MediaFoot_chap09 

Q-^ MediaFoot_chaplO 
H"& bin-debug 
H-lS' bin-release 
£!■■■& html-template 

I & libs 

a-® src 

H-& actionscript 
[S-& assets 
EI-& events 
EI-& Tenderers 
E- & views 
■^ MediaFoot.css 
"™ MediaFoot.mxml 

■■i| 



Figure 10-9 

Fichier de configuration du compilateur 



Fichier services-config.xml 

<?xml version="l. 0" encoding="UTF-8"?> 
<services-config> 
<services> 

<service id="amf plip-f lasliremoti ng- service" 
class="flex.messagi ng. services. Remoti ngService" 
messageTypes="f lex. messaging. messages .Remoti ngMessage"> 
<desti nation id="amfphp"> 
<cliannels> 

<cliannel ref="my-amf plip"/> 
</channel s> 
<properties> 

<source>*</source> 
</properties> 
</destination> 
</service> 
</services> 
<cliannels> 

<channel -defi ni tion id="my-amf php" 

class="mx.messagi ng . channel s. AMFChannel "> 
<endponnt uri=http://localhost/mediafoot/gateway.php 
class="flex.messagi ng. endpoints . AMFEndpoint"/> 
</channel -defi ni ti on> 
</channel s> 
</servi ces-conf i g> 

Vous noterez que I'attribut uri de la balise endpoint doit etre parametre 
en fonction de remplacement de la passerelle AMFPHP de votre ser- 
veur. Dans notre cas, ce chemin doit etre littp://localliost/mediafoot/ 
gateway. php. 

II faut a present parametrer une option de compilation en ajoutant ce 
fichier de configuration. Pour cela, selectionnez, dans la fenetre Flex 
Navigator, le projet MediaFoot, cliquez droit sur le dossier puis selec- 
tionnez I'option Properties (figure 10-10). 
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Figure 10-10 Acces aux proprietes 
de configuration du projet Flex 
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Figure 10-11 

Modification de I'option 
de compilation du projet Flex 



Selectionnez la section Flex Compiler dans le menu de gauche, puis 
ajoutezles arguments de compilation -services "services-config .xml " 
(figure 10-11). 



Properties for MediaFoot_chap10 



type filter text 
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Compiler options 

0Copy non-embedded files to output folder 

I I Generate accessible SWF file 

Enable strict type checking 

Enable warnings 

Additional compiler arguments; 



Generate HTML wrapper file 

Require Flash Player version; 9 \ • \^ \ • \^^ \ 

Use Express Install 
Enable integration with browser navigation 



I Restore Defaults I I Apply 



Creation de Tinterface utilisateur 

Notre projet est pret a se connecter a une base de donnees MySQL via la 
passerelle AMFPHP. Nous allons a present creer I'interface utilisateur 
qui affichera les donnees extraites de la base de donnees et qui appellera 
les methodes du service PHP. 

Avec Flex, cette interface est aisee a concevoir, en utilisant notamment 
le composant DataCn'd du framework : 

Tableau 10-2 DataGrid 



DataGrid Description 1 


Paquetage 


mx. controls 


Classe 


public class DataGrid 


Heritage 


DataGrid ^ DataGridBase ^ ListBase -^ ScrollControlBase ^ 
UlComponent ^ FlexSprite ^ Sprite ^ DisplayObjectContainer ^ 
InteractiveObject ^ DisplayObject ^ EventDispatcher ^ Object 
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Tableau 10-2 DataGrid (suite) 



DataGrid 


Description 


Implemente 


IIMESupport 


Sous-classes 


FileSystemDataGrid, PrintDataGrid 



Le composant DataCri d est identique a un composant Li st mais il permet 
d'afficher des donnees sur plusieurs colonnes. II est egalement possible 
d'utiliser certains outils de rendu d'elements {item renderers) pour person- 
naliser le contenu de certaines cellules (voir le chapitre precedent). 

Comme nous souhaitons afficher I'integralite du contenu de la base de 
donnees medi afoot, nous allons utiliser un composant DataGrid avec les 
quatre colonnes qui correspondront aux quatre champs de la base, plus 
une derniere colonne qui nous permettra d'ajouter une icone pour sup- 
primer I'enregistrement associe a la ligne (figure 10-12). 




Figure 10-12 

DataGrid de I'interface utilisateur 



Le code MXML correspondant a la figure 10-12 peut etre integre dans 
le fichier Joueurs.mxml dont voici le contenu : 

Fichier Joueurs.mxml 



<?xml version="l. 0" encoding="utf-8"?> 

<mx: Canvas xml ns :mx="http://www. adobe.com/2006/mxml " 

width="100%" 

backgroundAlpha="0.0" height="450" 

showEf f ect=" {wi peDownEf f ectid} "> 

<!--Effects--> 
<mx:WipeDown id="wipeDownEffectId" duration="1000"/> 
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<mx:Ti tleWi ndow 

title="Base de donnees joueurs" 
ho n'zontalAlign=" center" 
styleName="panneauStyleSimple" width= 



'100%" height="400"> 



<mx:VBox ho n'zontalAlign=" center" 
width="100%" height="100%"> 
<mx:DataGrid 

rowHeight="25" 

i d= " datag ri d_pl aye rs " 

styleName="dataCn'd" 

edi table="fal se" 

width="100%"> 



<mx:columns> 

<mx:DataGridColumn headerText= 

dataFiel d="prenoni"/> 
<mx:DataGrndCo1umn headerText= 

dataFiel d="noni"/> 
<mx:DataGrndCo1umn headerText= 

dataFiel d="position"/> 
<mx:DataGridCo1umn headerText= 

dataFiel d="club"/> 
<mx:DataGridColumn width="40" 
</mx:col umns> 
</mx:DataGrid> 



x="10" y="10" 



"Prenom" 



"Nom" 



'Position' 



'Club" 



headerText="Del"/> 



</mx:VBox> 
</mx : Ti tl eWi ndow> 

</mx: Canvas> 

Les balises <mx:DataGn'dCol umn> permettent de creer les colonnes du 
composant DataCn'd. Voici egalement un exemple de code CSS pour 
styliser ce composant : 

Code CSS pour ajouter des styles au composant DataGrid 



{ 



. dataCn'd 

headerColors: #000000, #000000; 
headerStyleName: dataCn'dHeader; 
verticalCridLineColor: #8F8F8F; 
backgroundAlpha: 0.0; 
rollOverColor: #BDE9FA; 
selectionColor: #FFFFFF; 
fontWeight: normal; 
hon'zontalGn'dLi nes : false; 

} 

. dataCn'dHeader 

{ 

color: #FFFFFF; 

fontWeight: bold; 
} 
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Appel d'une methode distante a partir de Flex 

Pour appeler la methode getPlayers() a partir de Flex, il faut utiliser la 
classe RemoteObject dont voici les caracteristiques : 

Tableau 10-3 RemoteObject 



^KnoteObject Description 


Paquetage 


mx.rpc.remoting.mxml 


Classe 


public dynamic class RemoteObject 


Heritage 


RemoteObject ^ RemoteObject ^ AbstractService ^ Proxy ^ Object 


Implemente 


IMXMLSupport, IMXMLObject 



< 

E 



Cette classe permet la connexion avec notre service distant AMFPHP, 
mais aussi avec n'importe quel autre type de service comme J2EE ou 
.NET. 

Ajoutez done, dans le fichier Joueurs.mxml , le code MXML suivant : 
Remote Object : acces service distant AIVIFPHP 

<mx: RemoteObject 

id="ROService" Q 
showBusyCursor="true" Q 
source=" joueurs . Joueurs" Q 
desti nation="amfphp"> Q 
<mx: method name="getPlayers" 

resul t="getPl ayersResul t(event) " /> Q 
</mx:RemoteObject> 

Q Nous identifierons notre classe Remote Object sous le nom 
ROService. 

Q L'attribut showBusyCursor="true" permet de changer le curseur de la 
souris en une horloge de chargement pendant les processus de char- 
gement de donnees (particulierement courts avec le format AMF). 

Q L'attribut source=" joueurs. Joueurs" specifie le constructeur du ser- 
vice distant (rappelez-vous, nous I'avons precise lors de I'utilisation 
du Service Bowser). 

Q L'attribut destination correspond a I'identifiant specifie dans le 
fichier services-config .xml, balise destination. 

Q Vient ensuite le noeud <mx:method> qui determine la methode du ser- 
vice distant a appeler. L'attribut result de ce noeud indique que la 
methode appelee est destinee a recuperer le retour du serveur, ce qui 
declenchera la fonction ActionScript getPl ayersResul t() pour la 
recuperation des donnees. 
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Code ActionScript du module 

Nous definirons cette derniere fonction bientot. Commen9ons par creer 
un objet ArrayCol lection qui enregistrera toutes les donnees recuperees. 
A cet effet, nous avons cree, dans notre projet Flex, le fichier Action- 
Script qui porte le nom Joueurs.as et que nous deposerons dans le 
repertoire actionscri pt/amfphp. Ce fichier contiendra I'integralite du 
code ActionScript de notre module. Nous commen9ons done par ajouter 
la variable liee de type ArrayCol lection suivante : 

Ajout de la variable ArrayCol lection 

[Bindable] 

private var playersAC:ArrayCol lection; 

Revenons au fichier loueurs.mxml et a notre composant DataCrid. Nous 
allons specifier a I'attribut dataProvider de ce composant que la source 
de donnees est notre variable playersAC : 

Lier la variable playersAC a I'attribut dataProvider dans Joueurs.mxml 

<mx: DataCrid 

dataProvider="{playersAC}" 

rowHeight="25" 

id="datagrid_players" 

styleName="dataCrid" 

editable="fal se" 

width="100%" 

height="60%"> 

II faut egalement indiquer au compilateur Flex que le fichier Action- 
Script Joueurs.as est utilise dans le module : 

<mx:Script source=" . ./actionscri pt/amf php/3oueurs .as"/> 

Si vous compilez le projet en I'etat, Flex vous retournera I'erreur 
suivante : « 1046: Ce type est introuvable ou n'est pas une constante de 
compilation : ArrayCollection. » En effet, il faut prealablement importer 
dans le fichier ActionScript le paquetage suivant : 

Paquetage a importer dans Joueurs.as 

import mx. col lections .ArrayCol lection; 
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Compilez de nouveau, et une seconde erreur de compilation apparait. La 
methode getPlayersResul t() est manquante. Nous allons done I'ajouter 
dans le fichier ActionScript : 

Ajout de la methode getPlayersResultO dans Joueurs.as 

import mx. rpc. events .ResultEvent ; 

// methode result de recuperation de tous les joueurs 

private function getPlayersResul t(evt :ResultEvent) : void 

{ 

playersAC = ArrayCol lection(evt. result) ; 
} 

Cette methode recupere un objet de type ResultEvent, defini dans la 
classe ResultEvent, qui indique qu'une operation distante a retourne 
avec succes un resultat. Nous recuperons I'ensemble des donnees dans 
notre variable de type ArrayCol lection definie plus tot a cet effet. 

Si nous compilons a present notre projet, toutes les erreurs de compila- 
tion sont resolues, mais les donnees ne s'affichent toujours pas dans le 
composant DataCrid. En effet, il est indispensable de lancer prealable- 
ment la methode du service distant getPl ayers () . Cette methode doit se 
lancer pendant la phase d'initialisation de I'application. Nous allons 
done creer la fonction i ni ti al i sati on () suivante : 

Creer la fonction d'initialisation 

// initialisation de I'application 
private function initiali sati on (): void 
{ 

ROService. getPl ayers () ; 
} 

Cette fonction sera declenchee sur I'evenement initialize du compo- 
sant loueurs.mxml, soit directement dans la balise Canvas : 

Integration de la fonction InltlallsatlonQ dans la balise Canvas 

<?xml version="l. 0" encoding="utf-8"?> 

<mx: Canvas xml ns :mx="http://www. adobe.com/2006/mxml " 

width="100%" 

backgroundAlpha="0.0" height="450" 

showEf f ect=" {wi peDownEf f ectid} " 

initial ize=" initial isation() ;"> 

Vous pouvez compiler et observer le resultat. Les donnees s'affichent 
directement dans le composant DataCrid (figure 10-13). 



< 

E 
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Figure 10-13 

Donnees de la base de donnees, integrees 
dans le composant DataGrid 
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Suppression d'un enregistrement 

II reste a present a creer les methodes pour supprimer un enregistrement 
de la base de donnees. Commen9ons par ecrire la methode PHP du ser- 
vice distant dans le fichier Joueurs. php : 

Methode delPlayerQ dans Joueurs.php 

/** 

@desc suppn'me un joueur 

V 

function del Player($oPlayer ) 

{ 

Sid = SoPlayer ['id'] ; 

if(!mysql_query("DELETE from joueurs WHERE id = '$id"')) 

{ 

throw new ErrorC'Erreur") ; 

} 

return $this->getPlayers() ; 
} 

Cette methode execute une requete SQL pour supprimer I'enregistre- 
ment identifie par la cle primaire id, puis elle declenche la methode 
getPlayersO pour afficher le nouveau contenu de la base de donnees. 

Au niveau du fichier ActionScript de notre application Flex, les 
methodes a integrer sont les suivantes : 

Methode DelEventO dans Joueurs.as 

import actionscript .events .Del Event; 

// methode d'appel du service de suppression 
private function del ListPlayers(pEvt :DelEvent) : void 
{ 

ROService . del PI ayer (pEvt . pi ayer ) ; 
} 
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// methode result de suppression d'un enregi strement 
private function del PlayerResul t(evt: ResultEvent) : void 

{ 

playersAC.removeItemAt(datagrid_players. selectedlndex ) ; 

} 

Vous noterez I'utilisation d'une nouvelle classe, Del Event, qui integre la 
methode Del Event () et qui est heritee de la classe Event : 

Classe DelEvent 

package actionscript .events 

{ 

import flash .events. Event ; 

public class DelEvent extends Event 

{ 

public static const DEL_PLAYER: String = "DEL_PLAYER" ; 

public van player:Object; 

public function DelEvent(pEvent :Stri ng , oPlayer:Object) 

{ 

super(pEvent) ; 
player = oPlayer; 
} 
} 
} 

Cette classe definit en realite un evenement personnalise. Une ligne 
d'instruction permettant d'ecouter cet evenement en particulier doit 
done etre ajoutee pendant le processus d'initialisation de I'application : 

// initialisation de I'application 
private function ini tiali sation() : void 
{ 

ROService. getPlayers() ; 

datagrid_pl ayer s . addEvent Li stener (Del Event . DEL_P LAYER , 
del ListPlayers) ; 
} 



< 

E 



Nous devons egalement aj outer un item renderer '^out declencher directe- 
ment la suppression d'un enregistrement en aliquant sur une icone loca- 
lisee dans la colonne Del de notre composant DataCrid. Nommons cet 
item Tenderer ItemRenderRemoveButton et pla9ons-le dans un fichier 
MXML: 



Ajout de I'ltemRenderRemoveButton 

<?xml version="l. 0" encoding="utf-8"?> 

<mx: VBox xml ns :mx=" http://www.adobe.com/2006/mxml ' 

horizontalAlign="center"> 
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<mx:Script> 
<![CDATA[ 

import mx. controls. DataCrid; 

import action script. events. Del Event; 

[Embed (sou rce=" . . /asset s/ui /delete. png")] 

[Bindable] 

public var deleteIcon:Class; 

private function onClick ( pEvt:MouseEvent ):void 

{ 

var ownerCrid:DataCrid = DataCrid ( owner ); 

var player:Object = ownerCrid. selectedltem; 

ownerCrid.dispatchEvent( new DelEvent 

( DelEvent. DEL_PLAYER, player ) ); 
} 

]]> 
</mx:Script> 
<mx: LinkButton icon="{deleteIcon}" click="onClick(event) ; " /> 
</mx:VBox> 

La liaison avec Vttem Tenderer sera effective directement via I'attribut 
itemRenderer de la colonne en question : 

Lier I'item renderer a la colonne Del 



'Prenom" dataField="prenom"/> 
'Norn" dataField="nom"/> 
'Position" 

'Club" dataField="club"/> 



<mx:columns> 

<mx: DataCridColumn headerText 
<mx: DataCridColumn headerText 
<mx: DataCridColumn headerText 

dataField="posi tion"/> 
<mx: DataCridColumn headerText 
<mx: DataCridColumn width="40" headerText="Del " 
dataFi el d=" avail able" 

itemRenderer="renderers.ItemRenderRemoveButton"/> 
</mx: col umns> 

Ajoutons egalement un nouveau noeud pour I'appel du service distant 
dans la balise RemoteObject : 

Appel du service distant dans la balise RemoteObject 

<!--Remote Object: acces service distant AMFPHP--> 
<mx: RemoteObject 

id="ROService" 

showBusyCursor="true" 

source=" joueurs. Joueurs" 

destination="amf php"> 

<mx:method name="getPlayers" 

resul t="getPlayersResult(event) " /> 

<mx: method name="del Player" 

resul t="del PI ayerResult (event)" /> 
</mx: RemoteObject> 
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Compilez a present votre projet et essayez de supprimer un enregistre- 
ment (figure 10-14). Vous pourrez controler que renregistrement a bien 
ete supprime egalement de la base de donnees via I'interface d'adminis- 
tration d'EasyPHP. 



^^^^^^^^^^^^^^^m 



Figure 10-14 

Item Tenderer pour suppression 
des enregistrements 



Ajout d'un enregistrement 

Nous allons terminer ce module en inserant un formulaire d'ajout 
d'enregistrement. Commen9ons par ajouter un dernier noeud au service 
RemoteObject : 

Ajout de la methode addPlayer a RemoteObject 

<! — Remote Object: acces service distant AMFPHP — > 
<mx: RemoteObject 
id="ROService" 
showBusyCursor="true" 
source=" joueurs . loueurs" 
desti nation="amfphp"> 
<mx:method name="getPlayers" 

resul t=" get PI aye rsResult (event) " /> 
<mx:method name="del Player" 

resul t=" del PI aye rResult (event) " /> 
<mx: method name="addPl ayer" 

resul t="addPl ayerResu! t (event) " /> 
</mx:RemoteObject> 

Puis definissons la methode du service dans le fichier Joueurs. php : 
Methode addPlayerQ dans Joueurs.php 

Odesc ajoute un joueur 

V 

function addPlayer($oPlayer) 

{ 

$prenom = SoPlayer [ ' prenom' ] ; 

$nom = SoPlayer [ ' nom ' ] ; 
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Jposition = $oPlayer[ ' position '] ; 
Sclub = $oPlayer['club'] ; 

if (mysql_query ("INSERT INTO joueurs (id, prenom, nom, 
position, club) VALUES (NULL, 'Sprenom', '$nom', 
'Sposition', 'Sclub')")) 

{ 

//throw new Error ("erreur addPlayer"); 

} 

return mysql_query("SELECT * FROM joueurs WHERE 
id = ' " .mysql_insert_id() ); 



Nous terminerons par I'mtegration du formulaire d'ajout en utilisant le 
composant MXML Form : 

Formulaire d'ajout d'un enregistrement 

<mx:Form width="50%" height="40%"> 

<mx: FormHeadi ng label="Ajouter un joueur" 
horizontalCenter="left"/> 
<mx:FormItem label="Prenom"> 

<mx:TextInput styleName="textBlackBold" id="prenom"/> 
</mx: FormItem> 

<mx: Formltem label="Nom"> 

<mx:TextInput styleName="textBlackBold" id="nom"/> 

</mx:FormItem> 

<mx: Formltem label="Posi tion"> 
<mx:TextInput styleName="textBlackBold" 

id="posi tion"/> 
</mx:FormItem> 

<mx:FormItem label="Cl ub"> 

<mx:TextInput styleName="textBlackBold" id="club"/> 

</mx:FormItem> 

<mx: Button width="225" label="Ajouter ce joueur" 
cl 1 ck=" f ormatPl ayer () "/> 

</mx: Form> 
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Vous noterez I'appel a la methode formatPlayerO lors du clic sur le 
bouton Ajouter ce joueur du formulaire. Cette methode nous permettra 
de formater les donnees a envoyer sous la forme d'un objet facilement 
interpretable par la passerelle AMFPHP : 

Fonctions formatPlayerO et addPlayerResultO 



// 
// 
// 
pr 

{ 



} 



formatage des donnees a envoyer 
ivate function formatPlayerO : void 

var prenom:Stri ng = prenom.text; 
var nom: String = nom.text; 
var position : St ri ng = position .text ; 
var club:String = club. text; 
var oPlayer:Object = { prenom : prenom, 
position : position, club : 
ROService. addPlayer(oPlayer) ; 



nom 
club 



}; 



// methode result d'ajout d'un enregi strement 

private function addPlayerResul t(evt: Resul tEvent) : void 

{ 

playersAC. addltem(evt. resul t.getltemAt(O) ) ; 

} 



< 

E 



En resume 

Le format AMF, associe a la passerelle AMFPHP et a Flex, est le pilier 
d'un trio redoutable d'efficacite pour la mise en ceuvre de I'interaction 
client/serveur d'une application RIA. Imaginez une application manipu- 
lant plusieurs dizaines de milliers d'enregistrements dans une base de 
donnees relationnelle complexe avec de multiples tables croisees. Les 
gains en performance, vitesse d'execution du serveur, utilisation de la 
bande passante et affichage des donnees sur le poste client seront opti- 
maux si vous employez ce format. 

Dans le chapitre suivant, nous allons mettre en ceuvre une autre applica- 
tion du format AMF, en utilisant cette fois-ci un serveur Java via le fra- 
mework BlazeDS, un composant assez impressionnant du LCDS 
d'Adobe, qui permet entre autres d'utiliser la technique de difflision de 
donnees personnalisees en temps reel (push data). Vaste programme ! 
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BlazeDS et la communication 

en temps ree 



BlazeDS est un sous-ensemble Open Source du projet 
LiveCycle Data Services (LCDS), une solution serveur 
d'Adobe qui permet, entre autres, de se connecter facilement 
a des donnees distantes {remoting), de pousser en temps reel 
des donnees depuis les applications Flex ou AIR {data push) 
ou de profiter des technologies de messagerie entre le serveur 
et vos applications {messaging}. Nous allons ici I'integrer 
a notre projet pour proposer un module d'affichage 
de donnees en temps reel. 



SOMMAIRE 

► Etude de cas 

► Mise en oeuvre 

► Conception de I'interface client 

► Conception de I'interface 



MOTS-CLES 

► BlazeDS 

► Remoting 

► Data Push 

► Messaging 

► LiveCycle Data Services 

► Apache Tomcat 

► Java EE 

► JDK 



B.A.BA Java EE (J2EE) 

Java EE (Java Enterprise Edition, anciennement 
J2EE) est une specification pour le langage de pro- 
grammation Java, destinee aux applications 
d'entreprise. 



BlazeDS, une solution serveur Open Source 

BlazeDS est objectivement une petite revolution dans I'univers des solu- 
tions serveur proposees par Adobe. En effet, ce sous-ensemble gratuit et 
Open Source de LCDS est une plate-forme deployee sur serveur 
d'applications Java EE (anciennement J2EE). 

LCDS permet en realite d'integrer, de developper, de deployer, de confi- 
gurer et d'executer des services. II existe actuellement trois options : 

• BlazeDS est une solution partielle de LCDS, se focalisant sur les 
technologies de remoting, push data et messagerie ; 

• LiveCycle Data Services Entreprise Suite (LCDS ES) fournit une 
infrastructure complete pour le developpement d'applications Flex et 
AIR; 

• LCDS Community Edition permet d'acceder au support d'Adobe 
ainsi qu'aux differents builds de BlazeDS. 

Voici un tableau comparatif entre les solutions BlazeDS et LCDS ES 
afin de mieux definir vos besoins en fonction de votre projet : 

Tableau 11-1 Comparatif entre BlazeDS et LCDS ES 



Fonctionnalite 


BlazeDS 


LiveCycle ■ 
Data Services 

ES 

1 


Licence 


Open source 


Commercial 


Services de gestion de donnees 






Synchronisation client-serveur 




oui 


Resolution de conflits 




oui 


Pagination des donnees 




oui 


Adaptateur SQL 




oui 


Adaptateur Hibernate 




oui 


Services documentaires 






Connectivite LiveCycle 




oui 


Generation de fichiers RIA au format PDF 




oui 


Services pour les applications d'entreprise 






Acces aux donnees/remoting 


oui 


oui 


Service de proxy 


oui 


oui 


Prise en charge des tests automatises 




oui 


Clusterisation de logiciels 


oui 


oui 


Compilateur Web tier 




oui 
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Tableau 11-1 Comparatif entre BlazeDS et LCDS ES (suite) 



Fonctionnalite 

1 


BlazeDS 


LiveCycle 
Data Services 
ES 


Integration a I'entreprise 






Generation WSRP 




oui 


Ajax Data Services 


oui 


oui 


Flex-Ajax Bridge 


oui 


oui 


Configuration a ('execution 


oui 


oui 


Arclnitecture d'adaptateur ouverte 


oui 


oui 


Adaptateur JIVIS 


oui 


oui 


Integration des composants au framework cote serveur 


oui 


oui 


Integration avec ColdFusion 


oui 


oui 


Prise en ciiarge des applications liors connexion 






Mise en cache des donnees hors connexion 




oui 


Mise en file d'attente des messages en local 




oui 


Donnees en temps reel 






Publication et abonnement par messagerie 


oui 


oui 


Qualite de service en temps reel 




oui 


Tunneling RTMP 




oui 



L'architecture de BlazeDS repose sur une servlet et un ensemble de 
fichiers XML a configurer. 

Avec BlazeDS, nous pouvons utiliser trois types de services : 

• des services de type proxy ; 

• des services de messagerie {messaging) ; 

• des technologies de remottng. 

Services de proxy 

Nous Savons qu'il est possible d'utiliser les services de type proxy a partir 
de Flex meme, mais ceux-ci necessitent d'invoquer des destinations se 
trouvant sur le meme domaine que I'hote de I'application. II est done 
necessaire de parametrer un fichier de regie d'autorisation interdomaine 
XML afin d'eviter ce probleme. En revanche, BlazeDS permet de con- 
tacter n'importe quelle destination HTTP sans se soucier du nom de 
domaine. Utiliser ses services de proxy peut done etre parfois preferable. 



B.A.BA Servlet 



Une servlet est une application Java qui permet de 
generer dynamiquement des donnees au sein d'un 
serveur HTTP Ces donnees sent generalement pre- 
sentees au format HTML, mais elles peuvent egale- 
ment I'etre au format XML. Avec BlazeDS, la 
servlet permet notamment de localiser et d'invo- 
quer les services Java, et de serialiser les donnees 
echangees entre Flex et Java. 
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Services de messagerie 

BlazeDS propose egalement des services de type messaging. II permet 
d'utiliser deux types de canaux dedies a la messagerie client- serveur : 

• RTMP {Real Time Messaging Protocol) permet de maintenir une con- 
nexion client-serveur sans obligation pour le client d'interroger le ser- 
veur periodiquement. Malheureusement, le RTMP est assez mal pris 
en charge par BlazeDS, contrairement a LCDS ES ; il est done pre- 
ferable de I'eviter. 

• AMF, que nous avons aborde au chapitre 10, interroge le serveur 
periodiquement. 



Appel d'objets distants 

BlazeDS integre egalement des technologies de type remoting, qui per- 
mettent I'invocation distante d'objets (Java ou PHP). Celles-ci prennent 
en charge les appels RPC via RemoteObject. Mise en oeuvre de la mes- 
sagerie BlazeDS dans I'etude de cas 

Nous allons utiliser les services de messagerie inclus dans BlazeDS pour 
le developpement de notre module « Match Live ». Notre objectif est 
d'afficher en temps reel les commentaires d'un match en direct, envoyes 
a partir d'une application Flex serveur (figure 11-1). Ces commentaires 
seront affiches sur une fenetre de I'interface client de notre etude de cas 
(figure 11-2). 





Serveur ^^^^^^^^^^^_ 




nonummy hendrerit mauris. Pha sellus porta. Fusee suscipit yarius mi Cum sociisLorem ipsum dolor sit amet, consec tetuer ^ 




adipiscing elit. Praesent yestibulum Aenean nonummy hendrerit mauris. Pha sellus porta. Fusee suscipit yarius mi Cum ' 




sociisLorem ipsum dolor sit amet, consec tetuer adipiscing elit. Praesent yestibulum Aenean nonummy hendrerit mauris. Pha 




sellus porta. Fusee suscipit yanus mi Cum sociisLorem ipsum dolor sit amet, consec tetuer adipiscing elit. Praesent yestibulum 




Aenean nonummy hendrent mauns. Pha sellus porta. Fusee suscipit yanus mi Cum sociisLorem ipsum dolor sit amet, consec 




tetuer adipiscing elit. Praesent yestibulum Aenean nonummy hendrerit mauris. Pha sellus porta. Fusee suscipit yarius mi Cum 




sociisLorem ipsum dolor sit amet, consec tetuer adipiscing elit. Praesent yestibulum Aenean nonummy hendrerit mauris. Pha 




sellus porta. Fusee suscipit yarius mi Cum sociisLorem ipsum dolor sit amet, consec tetuer adipiscing elit. Praesent yestibulum 




Aenean nonummy hendrerit mauris. Pha sellus porta. Fusee suscipit yarius mi Cum sociis 




02:37.930 enyoye 


a 02:35.289 : Lorem ipsum dolor sit amet K 
a 02:43.828 : consec tetuer adipiscing elit. " 




02:45.976 enyoye 




02:50.026 enyoye 


a 02:49.639 : Praesent yestibulum Aenean nonummy hendrerit mauris. 




02:58.108 enyoye 


a 02:57.054 : Pha sellus porta. 




03:06.201 enyoye 


a 03:03.170 : Fusee suscipit yarius mi Cum sociis... 




03:14.263 enyoye 


a 03:13.263 : penatibus et magnis dis parturient montes, nascetur ridiculus mus... = 




03:30.478 enyoye 


a 03:29.664 : Lorem ipsum dolor sit amet, consec tetuer adipiscing elit. 




03:46.637 enyoye 


a 03:46.086 : Praesent yestibulum Aenean nonummy hendrerit mauris. ' 




03:58.768 enyoye 


a 03:56.914 : Pha sellus porta. 




04:14.397 enyoye a 04:14.147 : Lorem ipsum dolor sit amet 1 




_i 








Envoyer 


Figure 11-1 

ication Flex cote serveur, 


Start timer Stop timer | 




08:43.710 


permettant I'envoi des 




commentaires en direct 
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RICH mTERNET EXPERIENCE - SPQRT MEDJA LABORATORY 



BdipiBcinHcliLPrieBentveEtibulum AeneinnonumrnirhendreritmiuriB. Phi selluB porta. FuBceBUSEipitviriuBmi 

Cum sociisLorem ipaum dolor sit amet, consec tetuer ■dipisEinp eliL Praesent voKtibulum Aenean nonumrny 

hendrerit mauris. Phi selluB porta. Fusee suscipitvsriuB mi Cum BociiB 

02:35.289 : Lorem ipsum dolor sit amet 

0Z:43.SZ8 : consec teluer adipiscing eliL 

02:43.639 : Praesent vestlbulum Aenean nonummy hendrerit mauris. 

02:ST.054 : Pha sellus porta. 

03:03.170 : Fusee suscipltvarlus ml Cum bocIIb... 

03:13.263 : penatlbuB et magniB diB parturient montes, nascetur rldlculus muB... 



Ti Aenein nonumnTir hendrerit rr 



IvWVVVVV^ f WW*VWlp 




Figure 11-2 

Application Flex cote client, affichant 
les commentaires en direct envoyes 
par I'application serveur 



Preparation de Tenvironnement 



Telechargements 

II est necessaire de telecharger trois elements independants afin de mettre 
en ceuvre notre fonctionnalite : BlazeDS, bien entendu, mais aussi un ser- 
veur Tomcat et le dernier JDK (Java Development Kit) en ligne. 

1 Commen9ons par telecharger BlazeDS : http://opensource.adobe.com/ 
wiki/display/blazeds/BlazeDS/. 

2 Recuperez ensuite Apache Tomcat, version 6 ou ulterieure, sur http:// 
tomcat.apache.org/. 

3 Puis telechargez le JDK 1.6 ou ulterieur sur http://java.sun.com/javase/ 
downloads/. 



B.A.BA Apache Tomcat 



Apache Tomcat est un conteneur libre de servlets 
Java EE. II implemente les specifications des servlets 
et des JSP (Java Server Pages) de Sun en incluant 
des outils pour la configuration et la gestion. II peut 
etre aussi configure en editant des fichiers de confi- 
guration XML. Tomcat comporte un serveur HTTP 
interne, on peut done aussi le considerer comme un 
serveur HTTP II a ete ecrit en langage Java, et peut 
ainsi s'executer via la machine virtuelle Java (JVM - 
Java Virtual Machine) sur n'importe quel sys- 
teme d'exploitation. 



ASTUCE BlazeDS version « cies en main » 

Pour gagner du temps, vous pourriez telecharger et installer la version dite « des en main » 
(turn/cey) de BlazeDS, qui integre deja un serveur Tomcat. Dans ce cas, pas besoin de recu- 
perer une version externe de Tomcat, mais la configuration du projet avec BlazeDS risque 
d'etre un peu plus delicate. 



B.A.BA JDK 



Le JDK [Java Development Kit) est I'environne- 
ment dans lequel le code Java est compile pour 
etre transforme en bytecode (code a octets ou 
pseudo-code) afin que la JVM puisse I'interpreter. 
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Installation et parametrage du JDK 

Commencez done par installer le JDK 1.6 (ou ulterieur). II sera probable- 
ment necessaire de s'assurer egalement que la variable d'environnement 
JAVA_HOME pointe bien sur le dossier ou a ete installe le JDK. Pour ajouter 
cette variable, selectionnez votre poste de travail, faites un clic droit et 
cherchez I'option Variables d'environnement. Rajoutez, si elle n'existe pas, 
une variable d'environnement JAVA_HOME avec, comme valeur, le chemin 
du JDK, par exemple C:\PrograiTi Files\Java\jdkl. 6. 0_10. 

Sur la variable Path, ajoutez egalement le chemin du repertoire \bin du 
JDK, par exemple C:\Program Fi les\Java\jdkl.6.0_10\bi n. 

Installation d'Apache Tomcat 

Installez ensuite le serveur Apache Tomcat, dans le repertoire d'installa- 
tion que vous aurez choisi (pour la suite de notre etude de cas, ce sera le 
repertoire E:\Tomcat 6.0). 

Installation de BlazeDS 

II est temps a present d'installer BlazeDS. La procedure est simple, il 
suffit d'extraire le fichier blazeds.war dans le repertoire \webapps de 
votre serveur Tomcat (voir en guise d'exemple la figure 11-3). 



Figure 11-3 

Installation de BlazeDS sous Apache Tomcat 



' E:\Tomcat G.OWebapps 



Fichier Ediiiion Affichage Favoris Ouiiils ? 

i^j Precedente ^ y|_J i,^ LJ Rechercher 

Adresse |lSf EiUo mcat: 6.0\webapps 
Nom '*' 
Ir^blageds 
Ir^docs 

l^hosii-manager 
Ir^ manager 
(^ROOT 



wm[x 



10°*= 



I 



Taills I Type 



Dossier de fichiers 
Dossier de fichiers 
Dossier de fichiers 
Dossier de fichiers 
Dossier de fichiers 
4 345 Ko Fichier WAR 



Demarrez ensuite le serveur Apache. A cet effet, indiquez I'emplace- 
ment du fichier tomcat6w.exe dans le repertoire \bin de votre serveur et 
executez ce fichier. Puis cliquez sur le bouton Start pour lancer le serveur 
(figure 11-4). 

Un repertoire \blazeds a ete cree a I'interieur du repertorie \webapps. Ce 
repertoire integre deux sous-repertoires, META-INF et WEB-INF. 
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> Apache Tomcat Properties 



General | Log On || Logging || Java || Sliartup || Shulidown | 
Service Name; i:omcai:6 



Display name; 


Apache Tomcai: 


1 








Descripiiion; 


Apache Tomcai: 6.0.18 Server 


hlilip ;//l:omcal:. apache. 1 


Paiih i:o execuiiable 






1 "E;\Tomcat 6.0\b 


n\l:omcal:6.exe" //RS//Tomcal:6 


1 








Siiariiup iiype; 


Auliomaliic 


L*?. 



Service Siiaiius; Siiopped 



Annuler J | Appliquer 



Apache Service Manager 



L Service Manager is ai:i:empi:ing i:o start the Following service . 

I3J Apache Tomcat 



[iiilllllllll 



Figure 11-4 

Apache Tomcat en cours de demarrage 



Creation du projet Flex 

II est temps maintenant de creer le projet Flex. 

1 Lancez Flex Builder, puis selectionnez File>New>Flex Projects. 

2 Choisissez ensuite un nom de projet et selectionnez un serveur 
d'application J2EE dans la section Server technology, en cochant 
I'option LlveCycle Data Services (figure 11-5). 

3 Pressez le bouton Next et ajustez les parametres du panneau Server 
location comme indique sur la figure 11-6 (en partant du principe que 
votre serveur Tomcat est installe dans le repertoire E:\Tomcat 6.0 ; 
dans le cas contraire, indiquez bien entendu votre propre chemin 
d'acces). 

4 Pressez ensuite le bouton Finish pour generer votre projet. 
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Figure 11-5 

Parametrage du projet Flex 



New FLex Project 



Create a Flex project. 

Choose d name and location for your project^ and configure the server technology your project will be using. 



Project name; | MediaFoot_chapl: 



Project location - 

0Use default location 


Folder: | E:\ch5pitre 9\riediaFoot chapll 


1 Browse,,, | 


J 



t^l Web application (runs in Flash Player) 
O t§ Desktop application (runs in Adobe AIR) 

Server technology 

Application server type: h2EE jvl 



Lise remote object access service 
® LiveCyde Data 5ervices 
'. 'ColdFusion Flash Remoting 
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Learn more about configuring a Flex project to work with your server technology . 



® 



I < Back 



I [ Cancel ~] 



Figure 11-6 

Parametrage du serveur Tomcat 
pour le projet Flex 




Configure J2EE Server 

Specify the location of your LiveCyde Data Services serverj and set compilation options for your application. 



Server location > 

G U5e default location For local LiveCyde Data Service? server- 


Root folder: E;\Tomcat 6.0\webapp5\blazed5 


1 1 Browse,,, | 




Root URL: http://locdhost;8080/blazeds | 




Context root: /blazeds | 






[validate Configuration] 



Compilation options 

©Compile application locally in Flex Builder (recommended) 
I '■_ 'Compile application on the server when the page is viewed 



Compiled Flex application location — 

This folder will be outside your project folder. 



Output folder: | E:\Tonicat 6.D\webapps\blazed5\MediaFoot_chapll-debug 



® 
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5 Retournez a present dans le repertoire \WEB-INF et accedez au sous- 
repertoire \flex. Editez le fichier messagi ng-config .xinl et ajoutez 
I'instruction <destination id="MatchLive"/> en fin de fichier, 
comme ceci : 

Fichier messaging-config.xml 

<?xml version="l. 0" encoding="UTF-8"?> 
<service id= "message-service" 

class=" flex. messaging . services .MessageService"> 

<adapters> 

<adapter-definition id="actionscri pt" 

class="fl ex. messagi ng. services .messagi ng .adapters . ActionScri ptAdapter" defaul t="true" /> 
<!-- <adapter-definition id="jms" 

cl as s="f lex. messagi ng . services. messaging. adapters . 3MSAdapter"/> — > 
</adapters> 

<defaul t-channel s> 

<channel ref ="my-pol 1 i ng-amf "/> 
</defaul t-channel s> 

<destination id="MatchLive"/> 

</service> 

6 Sauvegardez le fichier et redemarrez le serveur Apache Tomcat. 



Conception de I'interface client 

Continuons avec la conception de I'interface client. Avec Flex et BlazeDS, 
cette etape est etonnamment simple : ouvrez le fichier Match_live.mxml, 
destine a integrer le composant personnalise de cette fonctionnalite, et 
remplacezle code MXML existant par celui-ci : 

Ficliier IVJatcliJive.mxml 

<?xml version="l. 0" encoding="utf-8"?> 

<mx: Canvas xml ns :mx="http://www. adobe.com/2006/mxml " 

width="100%" 

backgroundAlpha="0.0" height="200" 

showEf f ect=" {wi peDownEf f ectid} " 

creationCompl ete="consumer . subscr ibe() "> 

<!--Effects--> 
<mx:WipeDown id="wipeDownEffectId" duration="1000"/> 

<mx:Script> 
<![CDATA[ 

import mx. messagi ng .messages . AsyncMessage; 
import mx. messagi ng .messages . IMessage; 
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private function commentsSend(message:IMessage) : void 
{ 

commentMsgs.text += 

message. body. commentMessage+"\n"; 
} 
]]> 
</mx:Scn' pt> 

<mx:Consumer id="consumer" destination="MatchLive" 
message="commentsSend(event. message) "/> 

<mx:Ti tleWi ndow 

title="Match Live" 
ho rizontalAlign=" center" 

styleName="panneauStyleSimple" width="100%" height="470"> 
<mx:VBox horizontalAlign="center" width="100%"> 
<mx:TextArea id="commentMsgs" width="100%" 

height="243" edi table="fal se" backgroundAlpha="0. 0" 
color="#FFFFFF"/> 
<mx: Image source="assets/li vematch/matchli ve. png"/> 
</mx:VBox> 
</mx : Ti tl eWi ndow> 

</mx: Canvas> 

Vous noterez I'utilisation d'une balise de type <mx:Consumer>. Cette balise 
indique que notre application sera « consommatrice » de messages, autre- 
ment dit qu'elle receptionnera les messages envoyes par le serveur. La 
fonction commentsSend() a pour role de formater les messages re9us, afin 
de les afficher dans le composant TextArea prevu a cet effet. 



Conception de Tinterface serveur 

L'interface serveur est a peine plus complexe. Creez un projet Flex diffe- 
rent, avec les memes parametres de configuration que ceux de I'applica- 
tion client (nous nommerons par exemple ce projet 
« MatchLiveServeur »), puis integrez le code MXML suivant dans le 
conteneur principal : 

Fichier MatchLiveServeur.mxml du projet MatchLiveServeur 

<?xml version="1.0" encodi ng="utf-8"?> 

<mx: Application xml ns :mx="http: //www. adobe. com/2 006/mxml " 

layout="absol ute" 

creationComplete=" consumer. subscri be() ; i nit() "> 

<mx: Scri pt> 
<! [CDATA[ 

import mx. messaging. messages .AsyncMessage; 
import mx. messaging. messages .IMessage; 
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import f lash. uti 1 s. Timer; 

import flash . events .TimerEvent ; 

private const MIN_MASK: Stri ng = "00" 
private const SEC_MASK: Stri ng = "00" 
private const MS_MASK: String = "000" 
private const TIMER_INTERVAL:i nt = 10; 

private van baseTimer: i nt ; 
private van t:Timer; 
private van timerStriStri ng ; 

private function send():void 
{ 

van message: IMessage = new AsyncMessage() ; 

message. body .commentMessage = timerStr + " : " 
+ msg.text; 

producer. send(message) ; 

msg.text = ""; 
} 

private function commentsSend (message: IMessage) : void 

{ 

commentMsgs . text += timerStr + " envoye a " 
+ message. body . commentMessage + "\n"; 
} 

private function init():void { 

t = new Timer(TIMER_INTERVAL); 

t.addEventListener(TimerEvent. TIMER, updateTimer) ; 
} 

private function updateTimer(evt :TimerEvent) : void { 
var d:Date = new Date(getTimer() - baseTimer); 



var mi n: String = (MIN_MASK 
var sec: String = (SEC_MASK 
var ms: String = (MS_MASK + 
counter. text = String(min h 
timerStr = counter . text ; 



+ d. minutes) . substr(-MIN_MASK. length) ; 
+ d. seconds) . substr(-SEC_MASK. length) ; 
d.mi Hi seconds) . substr(-MS_MASK. length) ; 

" : " + sec + " . " + ms) ; 



} 



private function startlimerO : void { 

baseTimer = getTimerO; 
t.startO ; 
} 

private function stopTimer () : void { 

t.stopO; 
} 



</mx: Scri pt> 
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<mx:Consumer id="consumer" destination="MatchLive" 

message="commentsSend(event. message) "/> 
<mx:Producer id="producer" destination="MatchLive"/> 

<mx: Panel title="Serveur" width="100%" height="100%"> 

<mx:TextArea id="commentMsgs" width="100%" height="50%"/> 

<mx: Control Bar> 

<mx:TextInput id="msg" width="100%" enter="send() "/> 
<mx:Button label="Envoyer" click="send() "/> 

</mx: Control Bar> 



<mx:ApplicationControlBar dock="true"> 

<mx:Button label="Start timer" click="startTimer() " /> 
<mx:Button label="Stop timer" click="stopTimer() " /> 
</mx : Appl i cati onCont rol Bar> 

<mx: Label id="counter" fontSize="24" /> 

</mx: Panel > 

</mx : Appl i cati on> 

Le code de cette application est similaire a celui de I'application cliente, 
excepte en deux points : 

• nous ajoutons une fonctionnalite Timer qui nous permettra de chro- 
nometrer le match et d'envoyer a I'application cliente cette informa- 
tion temporelle ; 

• nous ajoutons une balise de type <mx: Producer> afin d'indiquer que 
I'application est egalement « productrice » de messages. 

Pour verifier le bon fonctionnement de I'application, lancez les applica- 
tions client et serveur dans deux fenetres differentes de votre navigateur. 
Tous les messages envoyes par I'application serveur seront plus ou moins 
rapidement retranscrits dans I'application cliente. Nous avons cree, en 
realite, une application de c^a/ monodirectionnel en utilisant les services 
de messagerie de BlazeDS. 
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En resume I 

c 

Les capacites de Flex en tant qu'environnement de developpement S 

integre pour les applications clientes, associees aux services de LCDS ou | 

de sa composante gratuite BlazeDS, forment un couple d'une redoutable S 

efficacite, tant au niveau des performances que des delais de developpe- ^ 

ment. Ne negligez done pas cette option tres interessante pour le deve- S 

loppement de vos fliturs projets necessitant I'affichage en temps reel s 

d'informations. ' 
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MODULE 4 

Base de donnees « Jcueurs 

AMFPHP - MySQL 



uf^n ( admiriTJ 



Developpement RDA avec AIR 



Developpement avec AIR 



AIR est un moteur d'execution {runtime) developpe 
par Adobe, qui permet d'exploiter les technologies Internet 
les plus evoluees pour la creation d'applications de bureau 
RDA {Rich Desktop Application). Dans cet ultime chapitre, 
nous allons concevoir une petite application RDA, developpee 
au moyen de Flex Builder, en I'integrant a notre etude de cas. 



SOMMAIRE 

► Installation du moteur 
d'execution 

► Creation du projet 
avec Flex Builder 3 

► Developpement du widget 

► Ajout de styles au widget 

► Creation d'un paquetage 

MOTS-CLES 

► AIR 

► RDA 

► widget 

► moteur d'execution 

► paquetage AIR 



CLIND'SIL AIRetRIA 



Le nom choisi d'AIR est aussi tire de I'abreviation 
RIA (AIR a I'envers). 



B.A.BA SQLite 



SQLite est une petite bibliotlieque ecrite en 
langage C qui propose un moteur de base de don- 
nees. Contrairement aux serveurs de bases de don- 
nees comme iVlySQL ou PostgreSQL, sa 
particularite est de ne pas reproduire le schema 
habituel client-serveur, mais d'etre integre directe- 
ment aux programmes en utilisant des fichiers de 
bases de donnees. 



AIR est I'abreviation ^ Adobe Integrated Kuntime. Ce moteur d'execution 
multi-plate-forme etait originellement connu sous son nom de code 
« Apollo ». AIR permet de developper des applications de type RDA 
(Rich Desktop Application) en combinant des technologies propres au 
Web et aux applications de bureau standards. 

Tout comme Java, AIR necessite I'installation prealable d'un moteur 
d'execution. Grace a ce dernier, il est possible de deployer en local des 
RIA, sans soucis de compatibilite, avec un fonctionnement identique quel 
que soit le systeme d'exploitation utilise (Window, Mac OS ou Linux). 

II est possible de developper des applications AIR en Ajax, avec Flex ou 
encore avec Flash. Les applications RDA developpees avec AIR sont 
ainsi tres variees : widgets, lecteurs multimedia, editeurs de texte, lec- 
teurs de flux RSS, etc. AIR ne semble pas limite dans ses champs 
d'application. De plus, AIR integre une base de donnees SQLite, ce qui 
rend le developpement et le deploiement d'applications couplees a des 
bases de donnees tres aises. 

Pour notre etude de cas, nous allons developper un petit widget sous la 
forme d'un lecteur de nouvelles (figure 12-1). Nous presenterons ainsi 
les fonctionnalites de base pour le deploiement d'une application RDA 
avec AIR, sous un environnement Flex Builder. 



Figure 12-1 

Lecteur de nouvelles RDA du projet MediaFoot 



MEDIAFOOT - NEWS READER - 5 Noyembre 2008 



Longtemps bouscules par la 
Fiorentina, les Bavarois ont su 
egaliser en fin de rencontre [1- 
1] pour prendre le point qu'ils 
desiraient. 



Les Florentins ont livre un gros match devant 
leur public mais ont paye leurs efforts et 
restent troisiemes du groupe F, a cinq 
longueurs du Bayern et de Lyon. 



Installer le moteur d'execution 

Pour commencer, il est necessaire d'installer le moteur d'execution. 
Celui-ci est disponible en telechargement ici : http://get.adobe.com/fr/air/. 

La taille du fichier d'installation du moteur est d'environ 13 Mo. Son tele- 
chargement et son installation ne necessiteront done que quelques minutes. 
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Creer le projet avec Flex Builder 3 

Flex Builder 3 permet de creer des projets AIR. Nous allons presenter 
toutes les etapes de creation de votre application. Le processus de develop- 
pement et de deploiement est simplifie par lutUisation de Flex Builder 3. 

Ouvrez Flex Builder 3 et creez un nouveau projet en selectionnant 
File>New>Flex Project. Cochez le type d'application Desktop application 
(runs in Adobe AIR), comme indique sur la figure 12-2. Donnez un nom a 
votre projet puis cliquez sur le bouton Finish. 



New Flex Project 



Q@S 



Create a Flex project. 

choose d name and location for your project, and configure the server technology your project w\\\ be using. 



tg 



Project name; MediaFciot_chapl2 



Project location 

Use default location 



Folder: | E;\cliapitre_9\MediaFoo^_chapl2 



I BroiAi5e.. 



Application type ■ 

O 1^ Web application (runs In Flash Player) 
t^ Desktop application (runs in Adobe AIR) 



Server technology - 



Application server type; None 



M 



[■■■ tJse remote object access service 
■ . LiveCycle Data Services 
' ColdFusion Flash Remoting 



I < Back i[^ 
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Attention 

AIR avec Flex Builder 3 uniquement 

II n'est possible de developper des RDA AIR 
qu'avec la version 3 ou 4 (en beta) de Flex 
Builder. Les applications Apollo generees avec 
la version 2 de Flex Builder ne sont pas compati- 
bles et necessitent parfois de retravailler 
quelque peu le code MXML 



I 



Figure 12-2 

Premiere etape de creation du projet AIR 



Plusieurs fichiers sont automatiquement generes, dont un fichier de des- 
cription MXML et un second fichier de description XML. Le fichier 
MXML conserve le nom de votre projet, comme pour un projet Flex 
classique, a ceci pres que le code genere automatiquement n'integre pas 
de conteneur principal de type Application mais une balise 
<mx:Wi ndowedApplication> a la place : 

Fichier JVJXJVJL 

<?xml version="l. 0" encoding="utf-8"?> 

<mx:Wi ndowedAppli cation xml ns :mx="http://www. adobe.com/2006/ 

mxml " layout="absol ute"> 

</mx:Wi ndowedAppli cation> 
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Tableau 12-1 WindowedApplication 



WindowedApplication 


Description J 


Paquetage 


mx.core 


Classe 


public class WindowedApplication 


Heritage 


WindowedApplication -> Application ^ LayoutContainer ^ 
Container ^ UlComponent ^ FlexSprite -> Sprite -> 
DisplayObjectContainer ^ InteractiveObject -^ 
DisplayObject ^ EventDispatcher ^ Object 


Implemente 


IWindow 



La classe WindowedApplication definit le conteneur principal d'une 
application developpee avec AIR. 

Passez en mode Design et jetez un ceil sur le panneau Components 
(figure 12-3). Un nouveau dossier intitule Adobe AIR est visible avec six 
nouveaux composants specifiques au developpement d'applications AIR. 



Figure 12-3 

Nouveaux composants dedies a AIR 



n- Outline El Components KS^ ° 


□ 






■■■^ TabNavigator 

00 ToggleButtonBar 

■■■■13] ViewStack 


m 


E 


a-fe Adobe AIR 








■ l^Q FileSystemComboEox 








■ ■ Irri FileSystemDataGrid 








■■■■tjQ FileSystemHistoryEutton 








■■■■[^ FileSystemList 








■■■■[Hj^ FileSystemTree 








■■■■[SHI 


1 





a-& Charts 



Nous allons plus particulierement utiliser le composant HTML pour notre 
application. En effet, s'il aurait ete possible d'utiliser un service web afin, 
par exemple, d'extraire un flux RSS ou de lire un simple flchier XML 
externe pour afficher dans notre RDA leur contenu, nous allons en rea- 
lite proceder differemment afln de presenter les possibilites de ce nou- 
veau composant. 

Developpement du widget 

Le composant HTML est un composant au fonctionnement basique, mais 
tres interessant. II afflche tout simplement, dans une application Flash, 
un contenu HTML cible par une adresse URL. Ce composant n'est dis- 
ponible que pour les applications AIR. 
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Tableau 12-2 HTML (AIR uniquement) 



HTML 


Description 


Paquetage 


mx.controls 


Classe 


public class HTML 


Heritage 


HTML ^ ScrollControlBase -> UlComponent ^ FlexSprite -> Sprite ^ 
DisplayObjectContainer ^ InteractiveObject ^ DisplayObject ^ 
EventDispatcher ^ Object 


Implemente 


IDataRenderer, IDroplnListltemRenderer, ILIstltemRenderer, 
IFocusManagerComponent 



Le code MXML de I'mterface utilisateur de notre application pourrait 
done ressembler a ceci : 



Fichier MediaFoot_chapl2.mxml 

<?xml version="l. 0" encoding="utf-8"?> 

<mx:Wi ndowedAppli cation xml ns :mx="http://www. adobe.com/2006/mxml " 

1 ay out=" absolute" 

title="MediaFoot" 

width="320" 

height="240"> 

<mx:VBox hon'zontalAlign= "center" verticalAlign= "middle" 
width="100%" height="100%"> 

<mx: Label height="7%" text="MEDIAFOOT - NEWS READER - 5 
Novembre 2008" color="#000000"/> 

<mx:HTML location="http://media.foot .free.fr/cahier/mediafoot-reader/mediafoot_reader .html " 
width="90%" 
height="86%"/> 

</mx:VBox> 

</mx:Wi ndowedAppli cation> 
Compilez votre application et observez le resultat (figure 12-4). 



MEDIAFOOT - NEWS READER - 5 No 




Longtemps bouscules par la 
Fiorentina, les Bavarois ont 5U 
egali^er en fin de rencontre (1- 
L) pour prendre le point qu'ils 
desiraient. 



Les Florentins ont livre un gros match devant 
leur public mais ont paye leurs efforts et 
restent troisiemes du groupe F, a cinq 
longueurs du Bayern et de Lyon. 

FIQRENTINA - BAYERN MUNICH : 1-1 



Figure 12-4 

Application AIR basique 
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Styliser le widget 

II serait interessant maintenant d'ajouter des styles pour definir et 
embellir I'apparence de notre application, en proposant une interface 
moins conventionnelle et plus moderne. 

Comme pour toute application AIR, I'interface utilisateur peut etre per- 
sonnalisee en utilisant les CSS. Nous pouvons par exemple reduire I'opa- 
cite de 50 % avec une couleur d'arriere-plan grisee, en integrant le bloc 
d'instructions suivant dans notre code MXML : 

Ajout de style dans le fichler MXML 

<mx:Style> 

Wi ndowedAppl i cati on 
{ 

background-color: "Oxcccccc" ; 
backg round -al pha: "0. 5" ; 

} 
</mx: Style> 

Mais ces instructions seules ne suffiront pas. En effet, toute application 
AIR integre un fichier de description XML qui definit les proprietes de 
base de I'application, comme sa transparence. 

Ce fichier de description est le fichier XML automatiquement genere 
dans le dossier source de votre application. Editez ce fichier ; nous allons 
le modifier ensemble afin de parametrer I'apparence de notre widget. 
Localisez, dans le fichier, les balises suivantes : 

Modification du fichier XML 

<!-- The type of system chrome to use (either "standard" or 
"none"). Optional. Default standard. --> 
<systeniChrome>none</systeniChrome> 

<!-- Whether the window is transparent. Only applicable when 
systemChrome is false. Optional. Default false. --> 
<transparent>true</transparent> 

Supprimez les marques de commentaires et ajustez les parametres de ces 
deux balises comme ci-dessus (none pour <systemChrome> et true pour 
<transparent>). Vous I'avez compris, ces deux proprietes definissent le 
style de I'interface et activent sa transparence. 

Compilez a nouveau I'application, et le resultat devrait etre similaire a 
celui visible sur la figure 12-5. 

Nous pouvons egalement ajouter des icones qui serviront de miniatures a 
notre application, et qui seront ajoutees au systeme lors de I'installation 
du widget : 
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MEDIAFOOT - NEWS READER - 5 Noyembre 2003 
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longueurs du Bayern et de Lyon. L 



Figure 12-5 

Une application AIR qui a du style. 



Ajout d'icones 

<icon> 

<imagel6xl6>icons/AIRApp_16. png</imagel6xl6> 

<image32x32>icons/AIRApp_32 . png</image32x32> 

<image48x48>icons/AIRApp_48.png</image48x48> 

<imagel28xl28>icons/AIRApp_128.png</imagel28xl28> 
</icon> 

Ces icones, au format PNG, sont integrees dans le dossier source de 
votre application, dans le repertoire /icons (figure 12-6). 



to E:\chapitre_9\MediaFoot_cliap12\src\ic... Q[ 


mm 


Fichier Edition Al^l^ichage Favoris Outils ? 




* 


t3 Precedente ^ 


- ^ \J^ Recherchar 


» 


Adresse |Q E;\chap 


tre_9\MediaFoot_i:hapl2\src\icons ,v, 


H°K 




AIRApp_16.png 


AIRApp_32.png 








AIRApp_48.png 


AIRApp_128.png 









Figure 12-6 

Icones de I'application 
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Creer un paquetage AIR 

Afin de distribuer votre application, il sera necessaire de creer un paque- 
tage AIR. Ce paquetage permet d'installer le moteur d'execution et 
I'application. L'operation est assez simple avec Flex Builder 3. 
1 Cliquez sur le bouton Export Release Build (figure 12-7) pour lancer le 
processus de creation du paquetage. 



Figure 12-7 

Exportation du packetage AIR de I'application 



m\\ 



l^ I Export Release Build (Optimized SWF or Adobe AIR File) i 

— ^ rrrr: *- 



2 Poursuivez en cliquant sur le bouton Next (figure 12-8). II vous sera 
ensuite demande d'integrer un certificat numerique. Creez-le vous- 
meme, si vous n'en possedez pas, au moyen du bouton Create... 



Figure 12-8 

Exportation du paquetage AIR 
de I'application : premiere etape 



Export Release Build 



Export Release Build 

! Files already in i:he expori: desiiinaiiion folder may be overwriiiiien. 



Applicaiiion; MediaFooi:_chapl2.mxml 



View source 

I I Enable view source 



Choose Source Files.. 



Expori: i:o file; 



MediaFooi:_chap 1 2 . air 



(in /MediaFool:_chapl2) 



® 



3 Remplissez les champs obligatoires, sauvegardez votre certificat et 
selectionnez-le de nouveau pour pouvoir cliquer sur le bouton Next 
(figure 12-9). 

4 II vous sera ensuite demande de confirmer I'integration dans le 
paquetage des fichiers disponibles dans le dossier source. Selec- 
tionnez-les tous (figure 12-10). 
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Export Release Build 



Digital Signature 

Specify the digital certificate that represents the application publisher's identity. 



Export and sign an AIR file with a digital certificate 



Certificate; E;\chapitre_9\MediaFoot_chapl2\deebox.pl2 



V Browse... Create.. 



Password; • 



Remember password for this session 
Timestamp 

O Export an intermediate AIRI file that will be signed later 



® 



<Back Next > 



Figure 12-9 

Exportation du paquetage AIR 
de I'application : integration 
d'un certificat numerique 



Export Release Build 



AIR File Contents 

Select the output files to include in the exported AIR or AIRI file. 



[^ MediaFoot_chapl2-app.xml (as META-INF/AIR/application.xml) (requi 
0^ MediaFoot_chapl2.swf (required) 
H--0 & icons 



mi 



J 



@ 



Figure 12-10 

Exportation du paquetage AIR 
de I'application : fichiers integres 
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Cliquez sur le bouton Finish. Un fichier d'extension .ai r sera genere et 
visible dans la fenetre Flex Navigator. C'est votre « executable », en 
quelque sorte, le paquetage a fournir pour distribuer et installer votre 
widget. Vous pouvez tester la procedure d'installation en double-cli- 
quant sur ce fichier (figure 12-11). 



Figure 12-11 

Installation de I'application RDA 
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En resume 

Le developpement d'applications RDA, telles que des widgets ou des 
applications de bureau plus evoluees, s'avere particulierement aise en 
combinant I'environnement Flex Builder 3 et le moteur d'execution 
AIR. Ainsi, dans ce chapitre, en seulement quelque lignes de code 
MXML, nous avons pose les bases de la conception d'une application 
AIR. Les fonctionnalites de Flex Builder, notamment dans la gestion de 
services web, pourront etre ulterieurement utilisees pour developper 
d'autres applications RDA plus completes. 
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Le futur avec Flex 4 
« Gumbo » 



A 



La prochaine version du framework Flex porte le nom de code 
« Gumbo ». Prevu pour le second semestre 2009, le nouveau Flex s'arti- 
culera autour de trois thematiques principales : faciliter la conception 
graphique, accroitre la productivite de developpement et integrer de 
nouvelles fonctionnalites integrant les capacites du lecteur Flash 10. 

Actuellement, le SDK de Flex 4 est disponible en test sur le site 
« laboratoire » d'Adobe : www.labs.adobe.com. 



Design in Mind : faciliter la conception 
graphique 

L'une des principales critiques faites aux applications developpees en 
Flex tourne autour du design de ces dernieres, trop similaires les unes 
par rapport aux autres. En effet, de nombreux developpeurs utilisent 
I'apparence de I'interface de Flex par defaut (connue sous le nom de 
« Halo »), plutot que de personnaliser le design de leurs interfaces en 
CSS ou par differents habillages (sktns). II semblerait meme que ce soit 
le cas de plus de la moitie des developpeurs Flex ! Ce qui est pour le 
moins paradoxal, si on prend en compte que Flex repose sur le moteur 
Flash, I'environnement de conception graphique probablement le plus 
creatif pour le Web. 



Ensavoirplus Thermo 



« Thermo » est le nom de code d'un logiciel 
d'Adobe qui aidera les designers lors du processus 
de creation d'interfaces utilisateurs pour RIA. II 
leur permettra en effet d'utiliser leurs outils habi- 
tuels (Photoshop, Illustrator, etc.) pour la creation 
d'applications visuelles rapidement integrables 
pour le developpement et la production. Flex 4 et 
Thermo devraient done avancer vers une collabo- 
ration nettement renforcee. 



Une meilleure collaboration entre designers et 
develop peurs 

Dans cette optique, Flex 4 fournira un framework optimise pour la colla- 
boration continue entre designers et developpeurs. Cette orientation est 
sans doute la priorite pour Adobe dans le programme de developpement 
de Flex 4. L'objectif consiste a optimiser le langage MXML (nouveau 
namespace : MXML 2009) afin de le rendre plus oriente « outils » et plus 
aise dans la description des fonctionnalites de type « experience 
utilisateur » (mise en page, transitions ou etats d'affichages, notamment). 

Un nouveau format d'echange graphique : FXG 

En parallele, Adobe est en train de creer un nouveau format appele FXG 
(FXG 1.0 : Graphic Interchange Format, ou format d'echange graphique). 
Ce format sera utilise pour promouvoir les fonctionnalites disponibles 
dans le lecteur Flash 10, ce qui permettra de decrire plus facilement en 
MXML des elements graphiques tels que des formes vectorielles, mais 
aussi des textes ou des images bitmaps (PNG, JPEG et GIF). 

Ce format devrait done faciliter la conception visuelle d'applications via 
les logiciels de la gamme Creative Suite d'Adobe (Photoshop, Illus- 
trator, Fireworks, etc.) mais aussi via le logiciel designe sous le nom de 
Thermo, et qui sera disponible probablement avec Flex 4. 

Afin d'atteindre tous ces objectifs. Flex 4 integrera done les fonctionna- 
lites suivantes : 

• le nouveau format graphique FXG ; 

• une nouvelle syntaxe pour les etats d'affichage ; 

• de nouveaux effets et de nouvelles transitions ; 

• de nouvelles classes d'execution graphique pour afficher des formes 
bas-niveau et des conteneurs ; 

• un nouveau langage MXML 2009 pour ameliorer la conception 
d'interface utilisateur orientee « outils » ; 

• de nouveaux composants pour adapter le modele architectural dans le 
but de faciliter I'habillage de I'interface utilisateur, etc. 
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Figure A-1 

Thermo permettra d'ameliorer la collabora- 
tion entre designers et developpeurs. 



Developpement productif 



Le second axe de developpement pour Flex 4 tourne autour du develop- 
pement productif. En effet, Adobe s'attache a ameliorer les perfor- 
mances du compilateur Flex et a aj outer au langage des fonctionnalites 
de productivite telles que la liaison de donnees (daia binding), mais aussi 
une meilleure automatisation des applications RDA avec AIR. 



Evolution du framework Flex 

Le nouveau framework Flex sera optimise pour pleinement utiliser les 
nouvelles capacites du lecteur Flash 10 et pour ajouter des fonctionna- 
lites requises par des cas d'utilisation precis. Nous trouverons done des 
nouveaux composants texte, la gestion de texte bidirectionnel (ecriture 
de droite a gauche pour les langues orientales) et de nouveaux supports 
pour composants video. 



Ensavoirplus Texte BiDi 



Dans le jargon informatique, le texte « BID! » est 
la capacite d'un logiciel a afficher correctement le 
texte bidirectionnel. En effet, peu de logiciels affi- 
chent correctement les textes bidirectionnels (ecri- 
ture de droite a gauche). 
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Le referencement en 
question 



B 



Le developpement d'applications RIA met toujours en exergue la ques- 
tion du referencement. En effet, la prise en compte des differentes tech- 
nologies RIA n'est pas optimale par les moteurs de recherche, qui ne 
peuvent pas, a priori, indexer facilement leur contenu. 

Mais cet « a priori » est partiellement faux aujourd'hui, tout du moins en 
ce qui concerne le format Flash. En effet, les principaux moteurs de 
recherche (Google et Yahoo en tete) referencent desormais les sites en 
Flash. Pour preuve, il suffit de taper les caracteres « filetype:swf » dans 
Google pour constater que plusieurs dizaines de millions de fichiers au 
format SWF sont indexes par Google. Et ce chiffre ne cesse d'aug- 
menter jour apres jour... 

En effet, les moteurs de recherche Google et Yahoo ont recemment 
annonce leur collaboration avec Adobe pour ameliorer I'indexation des 
fichiers au format Flash. Ainsi, Google a mis au point un algorithme 
d'indexation des fichiers Flash, utilise par leur robot (Googlebot), 
capable d'analyser la logique de navigation, de capturer toutes les infor- 
mations de type texte ainsi que les differentes donnees chargees pendant 
I'exploration du site. Le referencement des sites Flash et done Flex est 
en cours ! 



Figure B-1 

Google indexe egalement les sites Flash/Flex. 



Fichier Edition APfichage Historique Marque-pages Outils 
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<^ ' _, ' ^~ . ■^ \S http://www. google. I^r/search?q=filetype| t| )►] ||C|'|l^iletype:swl^ | Q^ 



Web Images Maps Actualites Video Gmail plus t 



Connexion i^ 



Google 



filetype:swf 



Rechercher 



Rechercher dans : Web O Pages francophones O Pages : France 



^1 

Preferences S 
9. ■ Franrp ' ■ 



Web 



Resultats 1 - 10 sur un total d'environ 94 400 000 pour filetype:swf (0,03 secondes) 



Conseil : Recherche pour resultats en FraiiQais uniquement . Vous pouvez indiquer votre langue 
de recherche dans Preferences 

[FLASH] ANIHCFQMURQFLARQTCQDJ;^ife7t^^^±ii[l^<> 
Format de fichier: Shockwave Flash 

0. D. iS- it. ^. ^. i. ±. ti. H. ^. <> <> <> <> 1/1. ^i3^^f^t:2008^10 ^24 B:^^iJ 
2003^10 ^25 B±^:X^JfMJkm^^^2m3^m ^25 B ... 
www.geodoctor.org/index.swf- P^^ 

[FLASH] SRK ARCHITECTS SRK ARCHITECTS FIRM PROFILE PORTFOLIO 

CONTACT US ... 

Forma Shockwave Flash 

SRK ARCHITECTS SRK ARCHITECTS FIRM PROFILE PORTFOLIO CONTACT US SRK 

ARCHITECTS SRK ARCHITECTS FIRM PROFILE FIRM PROFILE Firm History SRK 

Architects ... 

v^ww.srkarchitects.com/srk.sv^^'- Pages sirnilaires 



Mettre en oeuvre un site miroir 

Cependant, il est necessaire d'observer quelques recommandations afin 
de faciliter I'mdexation de votre site par les moteurs de recherche. Idea- 
lement, il serait preferable de creer un double HTML du site Flash/Flex 
(autrement dit, un site miroir), ce qui permettra aux moteurs d'indexer 
sans difficultes votre site. Ce dernier utilisera un petit script JavaScript 
pour rediriger automatiquement les visiteurs vers votre site Flash/Flex. 

Mais prenez garde cependant au fait que votre application ne doive pas 
non plus se lancer a I'aide d'un JavaScript, car il ne serait pas indexe par 
le robot de referencement de Google ! En effet, il semblerait que Goo- 
glebot n' execute pas certains types d'instructions JavaScript : ainsi, si 
votre page web charge un fichier Flash via une instruction JavaScript, il 
se pourrait que le robot d'indexation ne soit pas informe de la presence 
du fichier Flash et ne I'analyse pas. Attention done au script de redirec- 
tion automatique ! Comme toujours dans le cas du referencement avec 
Google, il vous faudra etre patient et experimenter minutieusement vos 
techniques d'indexation. 
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Cette technique semble etre celle adoptee par le desormais celebre site 
Deezer, un site d'ecoute de musique gratuit et developpe integralement 
en Flash. Son ergonomie est typique de celle proposee par une applica- 
tion RIA en Flash ou Flex, mais elle n'est pas specialement adaptee au 
referencement. Et pourtant, Deezer obtient de tres bons resultats dans 
les moteurs de recherche comme Google ou Yahoo. Prenez n'importe 
quel artiste en vogue du moment et entrez son nom dans I'un de ces 
moteurs de recherche. Etonnamment, les references au site Deezer sont 
excellentes, tres souvent en premiere page chez Google ! 



i 



'^ jason mraz - Recherche Google - Mozilla Firefox 



Fichier Edition AFFichage Historique Marque-pages Outils 



^'^ 



LlJ ^ http; //www. google. Fr/search?q=jason-l-mraz&ie=ul:F-8&£ie=utF-8i 



Web Images Maps Actualites Video Gmail plus t 



o 



H- 



jayr.laurent@gmail.com | Historiiiue Web | Mon compte | Deconnexion 



\j| O ^-^Q iC liasonmraz ~ 
^^ Rechercher dan 



Rechercher 



Recherche avancee 



I 



s : Web O Pages francophones O Pages : France 



Web 



Resultats 1 - 10 sur un total d'environ 5 580 000 pour jason mraz (0,05 secondes) 



:: Jason Mraz - 2008 Official Website - [ Traduire cette page i 

www.iasomnraz.com/- 3k - Eri . - .iges similaires - A noter 

Jason Mraz - Ecoute gratuite sur Deezer - 05:23 

Le troisieme album de Jason Mraz, "We Sing We Dance We Steal Things", sera lance en 
fanfare en France par Warner Music en automne prochain. ... 
www.deezer.com/fr/jason-mraz.html - 19k - En cache - Pages similaires - A noter 

Jason Mraz - Wil<ipedia 

Jason Mraz est un auteur-compositeur guitarists et chanteur americain. II est ne a 
Mechanicsville , comte de Hanover en Virginie aux Etats-Onis Ie23juin ... 
fr.wikipedia.org/wiki/Jason_Mraz - 41k - En cache - Pages similaires - A noter 



Termine 



Figure B-2 

Bien que realise 
completement en Flash, 
Deezer obtient un tres bon 
referencement chez Google 
et Yahoo. 



En examinant les differentes pages indexees par Google ou Yahoo, on 
constate que toutes les pages reliees au site Deezer sont en realite des 
pages HTML. En effet, plutot que d'essayer de referencer le site en 
Flash, Deezer reference des pages creees dynamiquement en PHP en 
extrayant les donnees d'une base de donnees commune au site Flash. 
Cette strategie SEO s'avere particulierement efficace et payante. 



B.A.BA SEO 



La technique du SEO (Search Engine Optimiza- 
tion) consiste a optimiser le developpement de 
sites Internet pour I'indexation par les moteurs de 
recherche. Concretement, la SEO est un ensemble 
de techniques visant a favoriser la comprehension 
de la thematique et du contenu d'un site par les 
robots des moteurs. Idealement, ces techniques 
apportent un maximum d'informations concernant 
le contenu aux robots d'indexation afin d'orienter 
le positionnement d'un site sur des mots-cles. 
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Figure B-3 

Site miroir HTML de Deezer 
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■jl* !«■ http; //www. deezer.com/fr/jason-mraz. html 


H>\ 


1 [G] '^ 1 jason mraz 


1^1 



■=MDEEZER 



> Jason Mraz 

Jason Mraz 



iTapez ici votre artiste ou titre prefere 



Actualites | Discographie | Fans | Commentaires | Photos | Videos 

N/A 




Actualites Jason Nraz 



Decouvrez I'univers magique de Jason Mraz - 2008-06-07 

Le troisieme album de Jason MraZj "We Sing We Dance We Steal Things'^ sera lance en fanfare en France 

par Warner Music en automne prochain. Decouvrez des a present I'univers magique de ce petit prodige 

americainj frere musical de Jamie Cullum... 

Soufcs : Chattsinfrancs.nst: 



»] 
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Recourir au deep linking 



Ensavoirplus FlashVars 



En appelant une animation Fiasli depuis un navi- 
gateur web, il est possible de lui associer quelques 
variables, les FlashVars. L'emploi de 
Fl ashVars pour faire passer des variables dans 
Flash est similaire a l'emploi d'URL dans le code 
HTML. Avec Fl ashVars, au lieu d'etre a la suite 
du nom de fichier, les variables sont transmises 
dans une balise param distincte, ainsi que dans 
une balise embed. 



Les applications Flash/Flex n'ont qu'un seul point d'entree, ce qui rend 
leur referencement problematique. Dans un site HTML classique, les 
balises meta qui decrivent le contenu d'une page sont analysees par les 
moteurs de recherche. II n'existe pas de balises meta pour des sites Flash, 
mais pour pallier ce manque, il est courant d'associer des mots-cles avec 
des FlashVars inclus dans I'appel au fichier SWF. Cependant, comme 
les applications Flash/Flex n'ont qu'un point d'entree unique, cette tech- 
nique n'est pas pertinente car impossible a mettre en oeuvre sur toutes les 
vues de I'application. 

Heureusement, la version 3 de Flex integre une fonctionnalite fort sym- 
pathique qui porte le nom de deep linking (lien profond). La methode du 
deep linking permet en effet de creer des points d'entree multiples dans 
votre application Flex. Ces points d'entree deviendront ainsi accessibles 
de I'exterieur, non seulement par les robots des moteurs de recherche, 
mais aussi directement par les internautes, ce qui leur permettra de pro- 
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fiter des favoris et autres marque-pages des navigateurs, ainsi que des 
fonctionnalites de navigation integrees aux navigateurs (page prece- 
dente, page suivante, historique, etc.). e 

De plus, le deep linking permettra d'analyser plus facilement les statisti- 
ques d'acces aux differentes sections d'un site Flash/Flex. 

L'aide en ligne de Flex explique comment modifier son application Flex 
pour y appliquer la technique du deep linking, un peu fastidieuse, il faut 
le reconnaitre. Cependant, il existe egalement un utilitaire tres interes- 
sant qui permet de faciliter I'utilisation de cette technique pour les appli- 
cations Flex. Cet outil porte le nom explicite de « UrlKit » et le projet est 
porte sur le site suivant : http://code.google.eom/p/urlkit/. 

N'hesitez pas a consulter ce site si la problematique du referencement de 
votre application Flex vous interesse, ainsi que I'optimisation de son 
ergonomie de navigation. 
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Regulierement, on associe (parfois injustement) les sites Flash ou Flex a 
des fichiers lourds et longs a telecharger. Ceci est encore un a priori, 
infonde la plupart du temps, car des comparatifs ont prouve qu'un site 
Flash etait en moyenne plus leger qu'un site equivalent en HTML avec 
le meme contenu graphique. 

Bien que le haut debit soit desormais le standard d'acces pour I'inter- 
naute moyen, il est cependant important d'optimiser la taille de vos 
fichiers SWF generes par Flex. Le firamework Flex optimise deja la taille 
des fichiers generes, mais il faut I'utilisez a bon escient pour en tirer 
parti. Prenons par exemple notre projet MediaFoot et le fichier SWF 
genere dans le repertoire \bin-debug. La taille du fichier MediaFoot . swf 
est de 618 790 octets. Cette taille est trop importante, et elle doit etre 
reduite avant production. 

Le fichier genere dans ce repertoire ne doit pas normalement etre utilise 
pour etre deploye sur un serveur web, car cette version est une version de 
debogage. II faut utiliser la version release (version de « publication ») qui 
sera automatiquement generee en cliquant sur le bouton Export Release 
Build dans le Workbench de Flex Builder. 

Le fichier ainsi genere automatiquement dans le repertoire \bin-release 
sera beaucoup plus leger (ici, 387 996 octets) et pourra etre deploye sur 
un serveur web. 



Figure C-1 

Le fichier MediaFoot.swf 



■Resource 

■ Run/Debug Settings 



Resource 
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Path; /MediaFoot_chapll/bin-debug/MediaFoot.swf 

Type; File 

Location; E;\Tomcat 6.0\webapps\blazeds\MediaFoot_chapl l-debug\MediaFoot.swf 

Size; 618790 bytes 

Last modified; 7 novembre 2008 00;03;49 
O Read only 
Archive 

Derived 

Text file encoding 

1 ©Default (inherited from container; utf-8) 
O Other ; utf-S vj 



Restore Defaults Apply 



*® 'i,- \ ^ \ ^- ^-Xp <P- 



^' I Export: Release Build (QpUmized SWF or Adobe AIR File) | 

Figure C-2 

SWF optimise pour deploiement 



Figure C-3 

Fichier SWF a utiliser pour production 
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II existe plusieurs frameworks facilitant la tache du developpement d'une 
application Flex. Les plus connus sont Cairngorm et PureMVC, qui sui- 
vent tous les deux le motif de conception MVC (Modele-Vue-Contro- 
leur). L'objectif de ces frameworks est d'eviter autant que possible de 
reinventer la roue a chaque nouveau developpement... 



Le framework Cairngorm 



Cairngorm, par exemple, est un framework au nom impronon9able pou- 
vant etre utilise pour les projets Flex d'envergure. II sert de guide, de 
motif de conception {design pattern en anglais) pour le developpeur, ce 
qui lui permettra de suivre une methodologie et une logique lors de la 
realisation de son application. Au final, en utilisant ce framework, le 
developpeur gagnera probablement du temps dans la conception de son 
application et generera un code source plus facilement comprehensible 
et maintenable par un autre developpeur. Le projet sera egalement plus 
modulaire et plus facile a integrer dans le cadre d'une equipe de plusieurs 
developpeurs. Cependant, Cairngorm est plutot lourd a mettre en 
ceuvre, et n'est ainsi pas recommande pour les petits projets, mais seule- 
ment pour ceux d'une certaine envergure. 



URL Telechargez Cairngorm 

Cairngorm est disponible en Open Source sur le site d'Adobe : 
y http://opensource. adobe. com/wil<i/display/cairngorm/Cairngorm 



Ensavoirplus TacheANT 



ANT est un acronyme pour Another Neat Tool 
(un autre chouette outil). II est principalement uti- 
lise pour automatiser la construction de projets en 
langage Java, mais il peut etre utilise pour tout 
autre type d'automatisation dans n'importe quel 
langage. 



Cairngen, tache ANT a la rescousse 

Cairngorm est malheureusement repute lent a I'utilisation. II existe des 
outils de generation automatique de code pouvant compenser ce defaut. 
Le plus utilise aujourd'hui est Cairngen, un outil simple se presentant 
sous la forme d'une tache ANT et permettant de creer I'arborescence 
type de Cairngorm. En tant que tache ANT, Cairngern est rapidement 
integrable dans le Builder de Flex. 



URL Telechargez Cairngen 

Cairngen est librement disponible ici : 
► http://www.ericfeminella.com/blog/ 
cairngen/ 
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